The title says it all.
I have a RadTreeView and a RadPanel on the same page. What I would like to do is whenever a node is clicked on the treeview, an async request is made to the server and the panel's textboxes and such are populated with data. I would also like to keep the same panel opened between nodes. For instance if, my user clicks on panel 2, then clicks on another node, I would like panel two to remain opened, just the data populated. I want the first panel open at pageLoad, but as just mentioned, once the user opens another panel, I want that panel to remain open.
When I set a panel to Expanded="true" none of the controls show up. When I click a node, the panel seems to clear all child controls completely. However, if I click on another panel, then back on the previous panel, the controls reappear. For example, if I have the first panel open ("Details") and change nodes, all of the "Details" panel contents have dissappeared. But, if I click on the "Page Content" panel, then back on the "Details" panel, the controls with the updated data are there again.
Why is the panel's contents disappearing?
Here's my source:
I have a RadTreeView and a RadPanel on the same page. What I would like to do is whenever a node is clicked on the treeview, an async request is made to the server and the panel's textboxes and such are populated with data. I would also like to keep the same panel opened between nodes. For instance if, my user clicks on panel 2, then clicks on another node, I would like panel two to remain opened, just the data populated. I want the first panel open at pageLoad, but as just mentioned, once the user opens another panel, I want that panel to remain open.
When I set a panel to Expanded="true" none of the controls show up. When I click a node, the panel seems to clear all child controls completely. However, if I click on another panel, then back on the previous panel, the controls reappear. For example, if I have the first panel open ("Details") and change nodes, all of the "Details" panel contents have dissappeared. But, if I click on the "Page Content" panel, then back on the "Details" panel, the controls with the updated data are there again.
Why is the panel's contents disappearing?
Here's my source:
<telerik:RadAjaxManager ID="AjaxManager1" runat="server" ClientEvents-OnResponseEnd="setDimensions"> | |
<AjaxSettings> | |
<telerik:AjaxSetting AjaxControlID="pagesRTV"> | |
<UpdatedControls> | |
<telerik:AjaxUpdatedControl ControlID="infoPanel" /> | |
<telerik:AjaxUpdatedControl ControlID="pathHF" /> | |
</UpdatedControls> | |
</telerik:AjaxSetting> | |
<telerik:AjaxSetting AjaxControlID="moveUpBtn"> | |
<UpdatedControls> | |
<telerik:AjaxUpdatedControl ControlID="pagesRTV" /> | |
</UpdatedControls> | |
</telerik:AjaxSetting> | |
<telerik:AjaxSetting AjaxControlID="moveDownBtn"> | |
<UpdatedControls> | |
<telerik:AjaxUpdatedControl ControlID="pagesRTV" /> | |
</UpdatedControls> | |
</telerik:AjaxSetting> | |
<telerik:AjaxSetting AjaxControlID="parentDDL"> | |
<UpdatedControls> | |
<telerik:AjaxUpdatedControl ControlID="pagesRTV" /> | |
<telerik:AjaxUpdatedControl ControlID="infoPanel" /> | |
<telerik:AjaxUpdatedControl ControlID="pathHF" /> | |
</UpdatedControls> | |
</telerik:AjaxSetting> | |
</AjaxSettings> | |
</telerik:RadAjaxManager> | |
<table id="pageTable" cellpadding="0" cellspacing="0" width="100%" style="margin-top:10px;"> | |
<tr> | |
<td valign="top" align="left" style="width:200px;background:#ffffff;border:1px solid #000;"> | |
<div id="pageDiv" style="width:200px;overflow:scroll;"> | |
<telerik:RadTreeView ID="pagesRTV" RegClient="true" runat="server" Skin="Vista" OnClientNodeExpanding="setDimensions" OnClientNodeClicked="EnableToolBar" OnNodeClick="pagesRTV_NodeClick" CausesValidation="false" /> | |
</div> | |
</td> | |
<td valign="top" align="left" style="padding-left:20px;"> | |
<asp:Panel ID="infoPanel" runat="server"> | |
<telerik:RadPanelBar ID="RadPanelBar1" RegClient="true" runat="server" Skin="Elevate" EnableEmbeddedSkins="false" ExpandMode="FullExpandedItem" Width="98%" > | |
<Items> | |
<telerik:RadPanelItem Text="Details" Expanded="true"> | |
<Items> | |
<telerik:RadPanelItem> | |
<ItemTemplate> | |
<table cellpadding="0" cellspacing="0" class="subcontentTable" style="margin-top:13px;"> | |
<tr> | |
<td valign="bottom" align="left" style="width:105px;">Page Title:</td> | |
<td valign="top" align="left"><asp:TextBox ID="pageTitleTB" runat="server" Width="250" /> <a href="#" id="pageTitleTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip3" Width="150" AutoCloseDelay="10800" TargetControlID="pageTitleTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="BottomLeft" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
Page title shown in the upper right browser window. This may be a description of the page and could contain keywords. | |
</div> | |
</telerik:RadToolTip> | |
</td> | |
</tr> | |
<tr> | |
<td valign="bottom" align="left" style="padding-top:3px;">Page Name:</td> | |
<td valign="top" align="left" style="padding-top:3px;"><asp:TextBox ID="pageNameTB" runat="server" Width="250" /> <a href="#" id="pageNameTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip1" Width="150" AutoCloseDelay="10800" TargetControlID="pageNameTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="BottomLeft" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
The page name will be displayed in the menu viewable to your visitors. This is usually only a few, brief words. | |
</div> | |
</telerik:RadToolTip> | |
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="pageNameTB" Display="Static"><strong> * Required.</strong></asp:RequiredFieldValidator> | |
</td> | |
</tr> | |
<tr> | |
<td valign="bottom" align="left" style="padding-top:3px;">Parent Page:</td> | |
<td valign="top" align="left" style="padding-top:3px;"><asp:DropDownList ID="parentDDL" runat="server" Width="256" OnSelectedIndexChanged="parentDDL_SelectedIndexChanged" AutoPostBack="true" ></asp:DropDownList> <a href="#" id="parentTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip10" Width="150" AutoCloseDelay="10800" TargetControlID="parentTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="BottomLeft" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
You may set this page as a subpage of another by choosing a parent page that has already been created. | |
</div> | |
</telerik:RadToolTip> | |
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="pageNameTB" Display="Static"><strong> * Required.</strong></asp:RequiredFieldValidator> | |
</td> | |
</tr> | |
<tr> | |
<td colspan="2" style="height:10px;"> </td> | |
</tr> | |
<tr> | |
<td colspan="2" style="height:25px;background:#eaeaea;font-size:16px;font-weight:bold;">META Data</td> | |
</tr> | |
<tr> | |
<td valign="top" align="left" style="padding-top:6px;">Description:</td> | |
<td valign="top" align="left" style="padding-top:3px;"><asp:TextBox ID="metaDescTB" runat="server" TextMode="MultiLine" Columns="46" Rows="7" style="font-family:Arial, Sans-Serif;font-size:11px;" /> <a href="#" id="metaDescTip" style="margin-top:2px;margin-left:5px;vertical-align:top;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip2" Width="200" AutoCloseDelay="10800" TargetControlID="metaDescTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="BottomLeft" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
The META description will be viewable only to search engines. The description should be a brief (less than 1024 characters) overview of the page's contents and should contain your page's keywords. | |
</div> | |
</telerik:RadToolTip> | |
</td> | |
</tr> | |
<tr> | |
<td valign="bottom" align="left" style="padding-top:6px;">Keywords:</td> | |
<td valign="top" align="left" style="padding-top:3px;"><asp:TextBox ID="metaKeywordsTB" runat="server" Width="250" /> <a href="#" id="metaKeywordsTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip4" Width="250" AutoCloseDelay="10800" TargetControlID="metaKeywordsTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="TopLeft" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
META keywords (or keyphrases) are viewable only to search engines. These words/phrases should be specific to your page's content and each phrase should be separated by a comma. For best results do not exceed 7-10 phrases per page. | |
</div> | |
</telerik:RadToolTip> | |
</td> | |
</tr> | |
<tr> | |
<td valign="bottom" align="left" style="padding-top:6px;">ROBOTS Instruction:</td> | |
<td valign="top" align="left" style="padding-top:3px;"><asp:DropDownList ID="robotsDDL" runat="server"><asp:ListItem>INDEX,FOLLOW</asp:ListItem><asp:ListItem>INDEX,NOFOLLOW</asp:ListItem><asp:ListItem>NOINDEX,FOLLOW</asp:ListItem><asp:ListItem>NOINDEX,NOFOLLOW</asp:ListItem></asp:DropDownList> <a href="#" id="robotsTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip5" Width="250" AutoCloseDelay="10800" TargetControlID="robotsTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="TopCenter" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
The ROBOTS META tag instructs search engine crawlers how to index and follow the links of your page. For most purposes, "INDEX,FOLLOW" should be used. | |
<br /><br /> | |
<strong>CAUTION: DO NOT CHANGE THIS SETTING UNLESS YOU ARE FAMILIAR WITH ITS FUNCTION.</strong> | |
</div> | |
</telerik:RadToolTip> | |
</td> | |
</tr> | |
<tr> | |
<td colspan="2" style="height:10px;"> </td> | |
</tr> | |
<tr> | |
<td colspan="2" style="height:25px;background:#eaeaea;font-size:16px;font-weight:bold;">Display Options</td> | |
</tr> | |
<tr> | |
<td valign="bottom" align="left" style="padding-top:6px;">Show In Menu?</td> | |
<td valign="top" align="left" style="padding-top:3px;"><asp:CheckBox ID="menuCB" runat="server" /> <a href="#" id="menuTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip6" Width="200" AutoCloseDelay="10800" TargetControlID="menuTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="TopRight" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
Check this box if you wish for the page to be displayed in the menu of your website. This setting is useful if you create landing pages for advertising or private pages for clients that you wouldn't want viewable by everyone. | |
</div> | |
</telerik:RadToolTip> | |
</td> | |
</tr> | |
<tr> | |
<td valign="bottom" align="left" style="padding-top:6px;">Publish Page?</td> | |
<td valign="top" align="left" style="padding-top:3px;"><asp:CheckBox ID="publishCB" runat="server" /> <a href="#" id="publishTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip7" Width="250" AutoCloseDelay="10800" TargetControlID="publishTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="TopRight" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
Check this box if you are ready for your page to be viewable. If this box is not checked, then the page will not be available for viewing by anyone. Also, if this page is not yet published, then it will <strong>not</strong> be listed in the menu even if the above box is checked. | |
<br /><br /> | |
This setting is useful if you are still working on a specific page; if the page is seasonal or used for marketing campaigns and those campaigns are not currently running; or, if you no longer want the page part of your website, but wish to not delete the page's contents from the system. | |
</div> | |
</telerik:RadToolTip> | |
</td> | |
</tr> | |
<tr> | |
<td valign="bottom" align="left" style="padding-top:6px;">Blog?</td> | |
<td valign="top" align="left" style="padding-top:3px;"><asp:CheckBox ID="blogCB" runat="server" Enabled="false" /> <a href="#" id="blogTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip8" Width="150" AutoCloseDelay="10800" TargetControlID="blogTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="TopRight" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
Is this page the source of a blog? Once the page has been created, you cannot change this setting. | |
</div> | |
</telerik:RadToolTip> | |
</td> | |
</tr> | |
<tr> | |
<td colspan="2" style="height:10px;"> </td> | |
</tr> | |
<tr> | |
<td colspan="2" style="height:25px;background:#eaeaea;font-size:16px;font-weight:bold;">Page Order</td> | |
</tr> | |
<tr> | |
<td valign="bottom" align="left" style="padding-top:6px;">Adjust Page Order:</td> | |
<td valign="top" align="left" style="padding-top:3px;"> | |
<asp:ImageButton ID="moveUpBtn" runat="server" ImageUrl="/images/commands/move_up.png" ToolTip="Move Up" OnClick="moveUpBtn_Clicked" CausesValidation="false" /><asp:ImageButton ID="moveDownBtn" runat="server" ImageUrl="/images/commands/move_down.png" ToolTip="Move Down" OnClick="moveDownBtn_Clicked" CausesValidation="false" /> <a href="#" id="orderTip" style="margin-top:2px;margin-left:5px;"><img src="/images/commands/info.png" /></a> | |
<telerik:RadToolTip runat="server" ID="RadToolTip9" Width="150" AutoCloseDelay="10800" TargetControlID="orderTip" IsClientID="true" OffsetY="4" HideEvent="Default" Animation="Fade" Position="TopRight" RelativeTo="Element" Skin="Vista"> | |
<div style="font-size:12px;padding:5px;"> | |
Adjust the order this page is listed in the menu system. | |
</div> | |
</telerik:RadToolTip> | |
</td> | |
</tr> | |
</table> | |
</ItemTemplate> | |
</telerik:RadPanelItem> | |
</Items> | |
</telerik:RadPanelItem> | |
<telerik:RadPanelItem Text="Page Content"> | |
<Items> | |
<telerik:RadPanelItem> | |
<ItemTemplate> | |
Page Content | |
</ItemTemplate> | |
</telerik:RadPanelItem> | |
</Items> | |
</telerik:RadPanelItem> | |
</Items> | |
</telerik:RadPanelBar> | |
</asp:Panel> | |
<script type="text/javascript"> | |
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(ajaxLoading); | |
function ajaxLoading(sender, args) { | |
var dataItems = args.get_dataItems(); | |
document.getElementById(webPathHF).value = dataItems[webPathHF]; | |
} | |
</script> | |