I am setting up a new page with nested radsplitters and a radpanelbar on the left acting as a menu. The menu is a sliding pane and the items in the menu(panelbar) are retrieved from a table. In the table I have a hierarchy and right now only the content bar has values. I have 2 navigateURLs in the table so that I can have hierarchy. What I want to happen is when a user clicks on a link on the menu, I set the contentURL to the pane on the right to the navigateURL from the panel. It is setting the contentURL in the javascript, but it is not going to it. It is going the URL set from the table and going to a new page for the url rather than filling up the contentPane. Also, I set the navigateURL in the table to nvarchar(100) and the url is being appended by %20s. How can I just truncate the url?
Here is my code:
<style type="text/css">
.RadPanelBar_OFfice2007 .rpGroup, .RadPanelBar_Office2007
{
overflow:visible !important;
}
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" OutputCompression="AutoDetect"></telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px">
<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
style="border: 0px;" />
</telerik:RadAjaxLoadingPanel>
<telerik:RadSplitter ID="mainSplitter" runat="server" Orientation="Horizontal" Width="100%" height="100%" Skin="Office2007"
VisibleDuringInit="true" >
<telerik:RadPane id="topPane" runat="server" Width="100%" Height="10%" >
<br />
<center> Acquire Media infomation bar(this will be on every page) </center>
</telerik:RadPane>
<telerik:RadSplitBar id="Radsplitbar1" runat="server" collapsemode="Forward" />
<telerik:RadPane ID="middlePane1" runat="server" Width="100%" Height="80%">
<telerik:RadSplitter ID= "nestedSplitter" runat="server" Orientation="Vertical" Width="100%" >
<telerik:RadPane id="middlePane" runat="server" width="22" scrolling="None" minwidth="22" PersistScrollPosition="true">
<telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22" clicktoopen="true" SkinID="Office2007" DockedPaneId="Menu" >
<telerik:RadSlidingPane id="Menu" title="Menu" runat="server" width="200" SkinID="Office2007" >
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" DataSourceID="panelGroups" width="180"
AllowCollapseAllItems="True" ExpandMode="SingleExpandedItem" OnItemClick="panelClicked" onclientitemclicked="itemClicked"
Skin="Office2007" DataFieldID="FieldID" DataFieldParentID="ParentID"
DataTextField="Text" DataNavigateUrlField="NavigateURL" >
<CollapseAnimation Type="InOutExpo" Duration="100"></CollapseAnimation>
</telerik:RadPanelBar>
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadSplitBar id="Radsplitbar3" runat="server" collapsemode="Forward" />
<telerik:RadPane id="contentPane" runat="server" Height="100%" >
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar id="Radsplitbar2" runat="server" collapsemode="Backward" />
<telerik:RadPane ID="BottomPane" runat="server" Width="100%" Height="10%" >
<br />
<center> legal and contact info (This will be on every page) </center>
</telerik:RadPane>
</telerik:RadSplitter>
<asp:SqlDataSource ID="panelGroups" runat="server"
ConnectionString="<%$ ConnectionStrings:ContentCentralConnectionString2 %>"
SelectCommand="SELECT * FROM [lauraPanelGroups]"></asp:SqlDataSource>
</form>
</body>
<script type="text/javascript">
function itemClicked(sender, eventArgs) {
var item = eventArgs.get_item();
var link = item._linkElement;
if (link != ""){
var contentPane = $find("<%=contentPane.ClientID%>");
contentPane._contentUrl = link;
}
var x = 1;
}
</script>
</html>
Here is my code:
<style type="text/css">
.RadPanelBar_OFfice2007 .rpGroup, .RadPanelBar_Office2007
{
overflow:visible !important;
}
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" OutputCompression="AutoDetect"></telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px">
<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
style="border: 0px;" />
</telerik:RadAjaxLoadingPanel>
<telerik:RadSplitter ID="mainSplitter" runat="server" Orientation="Horizontal" Width="100%" height="100%" Skin="Office2007"
VisibleDuringInit="true" >
<telerik:RadPane id="topPane" runat="server" Width="100%" Height="10%" >
<br />
<center> Acquire Media infomation bar(this will be on every page) </center>
</telerik:RadPane>
<telerik:RadSplitBar id="Radsplitbar1" runat="server" collapsemode="Forward" />
<telerik:RadPane ID="middlePane1" runat="server" Width="100%" Height="80%">
<telerik:RadSplitter ID= "nestedSplitter" runat="server" Orientation="Vertical" Width="100%" >
<telerik:RadPane id="middlePane" runat="server" width="22" scrolling="None" minwidth="22" PersistScrollPosition="true">
<telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22" clicktoopen="true" SkinID="Office2007" DockedPaneId="Menu" >
<telerik:RadSlidingPane id="Menu" title="Menu" runat="server" width="200" SkinID="Office2007" >
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" DataSourceID="panelGroups" width="180"
AllowCollapseAllItems="True" ExpandMode="SingleExpandedItem" OnItemClick="panelClicked" onclientitemclicked="itemClicked"
Skin="Office2007" DataFieldID="FieldID" DataFieldParentID="ParentID"
DataTextField="Text" DataNavigateUrlField="NavigateURL" >
<CollapseAnimation Type="InOutExpo" Duration="100"></CollapseAnimation>
</telerik:RadPanelBar>
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadSplitBar id="Radsplitbar3" runat="server" collapsemode="Forward" />
<telerik:RadPane id="contentPane" runat="server" Height="100%" >
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar id="Radsplitbar2" runat="server" collapsemode="Backward" />
<telerik:RadPane ID="BottomPane" runat="server" Width="100%" Height="10%" >
<br />
<center> legal and contact info (This will be on every page) </center>
</telerik:RadPane>
</telerik:RadSplitter>
<asp:SqlDataSource ID="panelGroups" runat="server"
ConnectionString="<%$ ConnectionStrings:ContentCentralConnectionString2 %>"
SelectCommand="SELECT * FROM [lauraPanelGroups]"></asp:SqlDataSource>
</form>
</body>
<script type="text/javascript">
function itemClicked(sender, eventArgs) {
var item = eventArgs.get_item();
var link = item._linkElement;
if (link != ""){
var contentPane = $find("<%=contentPane.ClientID%>");
contentPane._contentUrl = link;
}
var x = 1;
}
</script>
</html>