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

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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.