ASP.Net TreeView control Expand/Collapse not working when opened in iframe [Answered]RSS

• • Reply
  Abhishek Hot...

  Member

  1 Points

  14 Posts

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

  Nov 23, 2017 11:14 AM|Abhishek Hotte|LINK

  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.

  Thanks & Regards,
  Abhishek Hotte
• • Reply
  Deepak Panch...

  Contributor

  2550 Points

  1066 Posts

  Re: ASP.Net TreeView control Expand/Collapse not working when opened in iframe

  Nov 24, 2017 06:04 AM|Deepak Panchal|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  Abhishek Hot...

  Member

  1 Points

  14 Posts

  Re: ASP.Net TreeView control Expand/Collapse not working when opened in iframe

  Nov 27, 2017 12:24 PM|Abhishek Hotte|LINK

  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().

  

  Thanks & Regards,
  Abhishek Hotte
• • Reply
  Deepak Panch...

  Contributor

  2550 Points

  1066 Posts

  Re: ASP.Net TreeView control Expand/Collapse not working when opened in iframe

  Dec 01, 2017 07:54 AM|Deepak Panchal|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  Abhishek Hot...

  Member

  1 Points

  14 Posts

  Re: ASP.Net TreeView control Expand/Collapse not working when opened in iframe

  Dec 04, 2017 05:36 AM|Abhishek Hotte|LINK

  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.

  Thanks & Regards,
  Abhishek Hotte