Answered by:
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.
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">×</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