Treeview Node Click Causes URL Load In Other RadPane

[Kevin]

I have the following code related to a treeview control, where I'm trying to grab the value of a clicked node and use that value to reload a different pane with that url.  This is in the left page and I am reloading content in a right pane based on the node they click:

The problem right now is that this is failing:

var splitter = $find("<%= RadSplitter1.ClientID %>");

 

 

var rightPane = $find("<%= rightPane.ClientID %>");

 

 

 

I am trying to grab the client id values of the splitter and then the right hand pane, but those references are not valid.

<%

@ Page Language="C#" AutoEventWireup="true" Codebehind="HelpTree.aspx.cs" Inherits="X.HelpScreens.Views.HelpTree"

 

 

Title="HelpTree" MasterPageFile="~/Shared/Help.master" %>

 

<%

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

<

 

asp:Content ID="content" ContentPlaceHolderID="DefaultContent" Runat="Server">

 

<

 

script type="text/javascript" language="javascript">

 

 

function ClientNodeClicked(sender, eventArgs) {

 

 

var node = eventArgs.get_node();

 

alert(

"You clicked " + node.get_text() + " with " + node.get_value());

 

 

var splitter = $find("<%= RadSplitter1.ClientID %>");

 

 

var rightPane = $find("<%= rightPane.ClientID %>");

 

 

var pane = splitter.getPaneById(rightPane);

 

 

if (pane) {

 

pane.set_contentUrl(node.get_value());

}

 

else {

 

alert(

"Pane with ID '" + rightPane + "' not found.");

 

}

}

</

 

script>

 

 

<table cellpadding="5">

 

 

<tr>

 

 

<td>

 

 

<telerik:RadTreeView ID="RadTreeView1" Runat="server"

 

 

EnableEmbeddedSkins="False" Skin="X"

 

 

OnClientNodeClicked="ClientNodeClicked">

 

 

</telerik:RadTreeView>

 

 

</td>

 

 

</tr>

 

 

</table>

 

</

 

asp:Content>

Here is the overall page that contains this treeview page in one pane and help content in a right pane:

 

<%

@ Page Language="C#" AutoEventWireup="true" Codebehind="HelpDialog.aspx.cs" Inherits="X.HelpScreens.Views.HelpDialog"

 

 

 

 

 

Title="HelpDialog" MasterPageFile="~/Shared/Help.master" %>

 

<%

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

 

 

<

 

asp:Content ID="content" ContentPlaceHolderID="DefaultContent" Runat="Server">

 

 

 

 

 

<telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="470"

 

 

LiveResize="True" Orientation="Vertical" Skin="X" Width="100%">

 

 

 

 

 

<telerik:RadPane ID="leftPane" Runat="server" BackColor="#F0F0F0"

 

 

ContentUrl="HelpTree.aspx" Width="33%">

 

 

 

 

 

</telerik:RadPane>

 

 

 

 

 

<telerik:RadSplitBar ID="RadSplitBar1" Runat="server" CollapseMode="Forward"

 

 

Width="25px" />

 

 

 

 

 

<telerik:RadPane ID="rightPane" Runat="server" BackColor="#CCFFCC"

 

 

ContentUrl="Default.aspx">

 

 

 

 

 

</telerik:RadPane>

 

 

 

 

 

</telerik:RadSplitter>

 

</

 

asp:Content>

In case it matters, here's the master page below.

Given this info, what's the correct way to get references to the right pane so I can call its set_contentUrl method?

Thx

Master page is:

 

<%

@ Master Language="C#" AutoEventWireup="true" Codebehind="Help.master.cs"

 

 

 

 

 

Inherits="X.Shell.MasterPages.Help" %>

 

 

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

head id="Head" runat="server">

 

 

 

 

 

<title><asp:Literal ID="Literal2" runat="server" Text="<%$ Resources:WebResources, HelpTitle %>"/></title>

 

 

 

 

 

<link href="/common.css" rel="stylesheet" type="text/css" />

 

 

 

 

 

<link href="/help.css" rel="stylesheet" type="text/css" />

 

 

 

 

 

<link href="../Skins/X/Splitter.LiquidBrochure.css" rel="stylesheet" type="text/css" />

 

 

 

 

 

<link href="../Skins/X/PanelBar.LiquidBrochure.css" rel="stylesheet" type="text/css" />

 

 

 

 

 

<link href="../Skins/X/Slider.LiquidBrochure.css" rel="stylesheet" type="text/css" />

 

 

 

 

 

<link href="../Skins/X/Splitter.LiquidBrochure.css" rel="stylesheet" type="text/css" />

 

 

 

 

 

<link href="../Skins/X/TreeView.LiquidBrochure.css" rel="stylesheet" type="text/css" />

 

</

 

head>

 

<

 

body>

 

 

 

 

 

<form id="mainForm" runat="server">

 

 

 

 

 

<asp:ScriptManager ID="DefaultMasterScriptManager" runat="server">

 

 

 

 

 

</asp:ScriptManager>

 

 

 

 

 

<div id="content">

 

 

 

 

 

<asp:ContentPlaceHolder ID="DefaultContent" runat="server" />

 

 

 

 

 

<div id="helpfooter">

 

 

 

 

 

<table style="width:100%">

 

 

 

 

 

<tr>

 

 

 

 

 

<td>

 

 

 

 

 

&nbsp;

 

 

 

 

 

</td>

 

 

 

 

 

</tr>

 

 

 

 

 

</table>

 

 

 

 

 

</div>

 

 

 

 

 

</div>

 

 

 

 

 

</form>

 

</

 

body>

 

</

 

html>

 

[Kevin]

Here's the actual error I'm getting.  Sorry for the messy prior post.  I need to figure out how to post code in a better looking format!

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0103: The name 'RadSplitter1' does not exist in the current context

Source Error:

Line 8: alert("You clicked " + node.get_text() + " with " + node.get_value()); Line 9: Line 10: var splitter = $find("<%= RadSplitter1.ClientID %>");Line 11: var rightPane = $find("<%= rightPane.ClientID %>"); Line 12: var pane = splitter.getPaneById(rightPane);

[Svetlina Anati]

Hello Kevin,

I am not quite sure why the splitter cannot be found and I also do not see the whole markup of your MasterPage - the html, body, form elements are missing, etc. However, I suggest you to use an easier approach to achieve the desired result - to use the NavigateUrl and Target properties of the treeview as shown below:

  <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" VisibleDuringInit=false>
            <telerik:RadPane ID="navigationPane" runat="server" Width="200">
                <telerik:RadTreeView ID="TreeView" runat="server" Style="white-space: normal;">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Google" NavigateUrl="http://www.google.com" Target="contentPane">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Telerik" NavigateUrl="http://www.telerik.com" Target="contentPane">
                        </telerik:RadTreeNode>
                    </Nodes>
                    <CollapseAnimation Duration="100" Type="OutQuint" />
                    <ExpandAnimation Duration="100" />
                </telerik:RadTreeView>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" />
            <telerik:RadPane ID="contentPane" runat="server" ContentUrl="about:blank">
            </telerik:RadPane>
        </telerik:RadSplitter>

Please, note that in order to use this approach, you should initially set some ContentUrl to the target RadPane (e.g about:blank or a custom start page) in order to force it to create an IFRAME element. For your convenience I attached a sample demo to the thread.

In case you do not want to use this approach and you still experience problems, please open a new support ticket and send us a sample reproduction demo along with detailed reproduction instructions.

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[dror riov]

Hi Svetlina

I tried your example exactly
and it always opens a new window with the web site instead of putting the web site content inside the contentpane..
I am using version: 2008, 3, 1125, 35

I tried everything but it wont open the web site or my internal web pages inside the contentpane..
i even tried using target="<%= contentPane.ClientID%>"

any idea why it wont work?

[Svetlina Anati]

Hi dror riov,

I could not understand whether my exact project did not work on your side or the replication of the code in your original project did not work? Would you please open a new support ticket and send me the demo that does not work along with a video capture of the behavior and detailed explanations? Once I receive it and I am able to run it without applying any modifications to it, I will analyze it and do my best to modify it in order to meet your requirements.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.