locked
ASP.Net TreeView control Expand/Collapse not working when opened in iframe RRS feed

  • Question

  • User1762461883 posted

    Hi,

    I have one ASP.NET TreeView control and I'm displaying it in Bootstrap modal dialog using iframe, it is displaying properly but if I collapse/expand any treenode checkbox which contains child nodes it is not collapsing/expanding.

    If I display this TreeView control in normal HTML page(not in iframe) it is working fine, only in iframe it is not expanding/collapsing.

     <asp:TreeView ID="treeEditRes" runat="server" ShowCheckBoxes="All"  ShowExpandCollapse="true" ShowLines="false" ExpandDepth="1" NodeStyle-HorizontalPadding="3" PopulateNodesFromClient="true" SelectedNodeStyle-BackColor="Gray" OnTreeNodeExpanded="Node_Expand" OnTreeNodeCollapsed="Node_Collapse" >
          <SelectedNodeStyle CssClass="GridHead" />
     </asp:TreeView>

    Even I added events for Expand & Collapse if I expand/collapse node it is triggering those events but it is not expanding/collapsing.

     void Node_Expand(Object sender, TreeNodeEventArgs e)
     {
           e.Node.Expand();
     }
     void Node_Collapse(Object sender, TreeNodeEventArgs e)
     {
           e.Node.Collapse();
     }

    Please suggest me if the above code requires any changes.

    Thursday, November 23, 2017 11:14 AM

Answers

  • User1762461883 posted

    Hi Deepak,

    The reason why I want to display in it in iframe is I want to access the TreeView control in code behind.

    Now I created it in new page and accessing TreeView control using some other logic, no issues now, just some extra code I have added to access it in code behind.

    Any way thanks for your response.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 4, 2017 5:36 AM

All replies

  • User347430248 posted

    Hi  Abhishek Hot...,

    I can see that you are using Bootstrap model dialog.

    but you did not posted the full code. so we don't know that what actually you are doing in your code.

    I try to make a test with TreeView Control and Iframe.

    I put TreeView in onepage and load that page in Iframe working correctly.

    Webform2.aspx:

     <form id="form1" runat="server">
            <div>
                 <asp:TreeView ID="treeEditRes" runat="server" ShowCheckBoxes="All"  ShowExpandCollapse="true" ShowLines="false" ExpandDepth="1" NodeStyle-HorizontalPadding="3" PopulateNodesFromClient="true" SelectedNodeStyle-BackColor="Gray"   >
                                    <SelectedNodeStyle CssClass="GridHead" />
                                 <Nodes>     
                       <asp:TreeNode Text="Home" NavigateUrl="~/Home.aspx" Target="_blank"/>     
                        <asp:TreeNode Text="Employee" NavigateUrl="~/Employee.aspx" Target="_blank">     
                          <asp:TreeNode Text="Upload Resume" NavigateUrl="~/Upload_Resume.aspx" Target="_blank" />     
                          <asp:TreeNode Text="Edit Resume" NavigateUrl="~/Edit_Resume.aspx" Target="_blank" />     
                          <asp:TreeNode Text="View Resume" NavigateUrl="~/View_Resume.aspx" Target="_blank" />     
                       </asp:TreeNode>     
                        <asp:TreeNode Text="Employer" NavigateUrl="~/Employer.aspx" Target="_blank">     
                            <asp:TreeNode Text="Upload Job" NavigateUrl="~/Upload_Job.aspx" Target="_blank" />     
                            <asp:TreeNode Text="Edit Job" NavigateUrl="~/Edit_Job.aspx" Target="_blank" />     
                            <asp:TreeNode Text="View Job" NavigateUrl="~/View_Job.aspx" Target="_blank" />     
                        </asp:TreeNode>     
                        <asp:TreeNode Text="Admin" NavigateUrl="~/Admin.aspx" Target="_blank">     
                           <asp:TreeNode Text="Add User" NavigateUrl="~/Add_User.aspx" Target="_blank" />     
                           <asp:TreeNode Text="Edit User" NavigateUrl="~/Edit_Use.aspx" Target="_blank" />     
                           <asp:TreeNode Text="View User" NavigateUrl="~/View_User.aspx" Target="_blank" />     
                        </asp:TreeNode>     
                     </Nodes>     
                            </asp:TreeView>
            </div>
        </form>

    Webform1.aspx:

    <form id="form1" runat="server">
            <div>
                  <iframe id="ContentRightFrame" name="ContentRightFrame" src="WebForm2.aspx"  >
    
                 </iframe>
    
            </div>
        </form>

    I suggest you to post your full code. we will try to make a test with it to check the issue.

    Regards

    Deepak

    Friday, November 24, 2017 6:04 AM
  • User1762461883 posted

    Hi Deepak,

    I created TreeView control in one div and I'm appending this div html in the bootstrap modal body

    <div id="dvEditResp" class="treenode-content">
      <asp:TreeView ID="treeEditRes" runat="server" ShowCheckBoxes="All" onclick="client_OnTreeNodeChecked(event);" ShowExpandCollapse="true" ShowLines="false" ExpandDepth="1" NodeStyle-HorizontalPadding="3" PopulateNodesFromClient="false" SelectedNodeStyle-BackColor="Gray" >
          <SelectedNodeStyle CssClass="GridHead" />
      </asp:TreeView>
    </div>

    Once I bind the TreeView control I'm calling one javascript function to load this entire id html into bootstrap modal body

    <div class="modal fade" id="divModalAddResponsibility" role="dialog"  data-keyboard="false" data-confirm-leave="false" data-iframe-id="iFrameAddResponsibility">
    <div class="modal-dialog modal-md"><div class="modal-content">
    <div class="modal-header">
    <button id="btnModalClose" type="button" class="close" title="Close" data-dismiss=modal style="float:right">&times;</button>
    <h4 class="modal-title" id="divModalHeader">Add Responsibility</h4></div>
    <div class="modal-body"> // $("#dvEditResp").html() //here I'm adding entire div html dynamically </div>
    </div>

    Even I tried creating TreeView in new page and appending it to iframe and I have noticed that if I call it new page then the collapse/expand icon is calling TreeView_ToggleNode() and if directly append this to modal using $("#div").html() then it calling  __doPostBack('treeEditRes','tPages') function.

    I have created a small gif image for both scenarios first calling it in new page & second appending it to modal body using .html(), please have a look it and suggest me how to fix this within the same page using html().

    Monday, November 27, 2017 12:24 PM
  • User347430248 posted

    Hi Abhishek Hot...,

    you had mentioned that,"Even I tried creating TreeView in new page and appending it to iframe".

    if you are already creating a new page then is it necessary to use an iframe?

    Regards

    Deepak

    Friday, December 1, 2017 7:54 AM
  • User1762461883 posted

    Hi Deepak,

    The reason why I want to display in it in iframe is I want to access the TreeView control in code behind.

    Now I created it in new page and accessing TreeView control using some other logic, no issues now, just some extra code I have added to access it in code behind.

    Any way thanks for your response.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 4, 2017 5:36 AM