RadTreeView - Having a expand collapse node without any page
I just wanted to create a left navigation of below structure.
Head 1 [Clicking head1 should expand and show its child. Head1 will not have any page]
> child 1 [actual page]
> child 2 [actual page]
Head 2 [Similar to head1]
> child 1 [actual page]
> child 2 [actual page]
I tried to use sitefinity's Navigation control, selected RadTreeView for the template.
Can I achieve something similar to the one present in demos.telerik.com/.../defaultcs.aspx.
I found the setting that caused group page, to redirect to a child page
X Group pages redirect to the first subpage
The above option is turned off and RadtreeView works as expected.
Now the problem is, when user clicks on the Group page in the Navigation, it gets highlighted. Class name ".rtSelected" is added to every node I click.
Can this highlighting be stopped and I want to retain the selection to be on the actual page that is shown in the browser.
Hello David,
I tested the navigation behavior and if you have a group page with child pages, and your navigation is configured to "Group pages redirect to the first subpage", the rtSelected class is added to the child node, which is opened when you go to the group page. Wasn't that what you want to achieve?
Kind regards,Hi Jen,
I didn't want the group page to redirect me to first child page, as I have external links, redirecting page as child page.
I figured that out :). I unchecked the option in the Navigation widget property. [You can see my 2nd reply]
Now, I dont want group page to have "rtSelected" class, when I click on it.
I want "rtSelected" to applied to just child page/actual pages.
i.e., the selection/Highlight should be retained on page that is currently displayed.
Please check the leftside naviagtion control in this link for the behaviour that I expect
demos.telerik.com/.../defaultcs.aspx
Hello David,
Actually, what has to be done is to remove the rtsSelected class with javaScript, once it is set (because it gets set always). Following the demo you showed me, I came up with this sample. Create an ascx file in your project, which will be a custom template for your RadTreeView navigation. Here's the markup:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RadTreeViewTemplate.ascx.cs" Inherits="SitefinityWebApp.TemplateMapping.RadTreeViewTemplate" %><%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="sitefinity" %><%@ Register Assembly="SitefinityWebApp" Namespace="SitefinityWebApp.customWidgets" TagPrefix="custom" %><%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %><sf:ResourceLinks ID="resourcesLinks" runat="server"> <sf:ResourceFile JavaScriptLibrary="JQuery" /></sf:ResourceLinks><script type="text/javascript"> var cachedSelectedNode; function ClientNodeClicked(sender, args) var node = args.get_node(), $element = $(node.get_element()), $selectedNodeElement; if (node.get_nodes().get_count() > 0 && !node.get_expanded()) node.expand(); else node.collapse(); if (node.get_nodes().get_count() > 0 && cachedSelectedNode) $element.find('div.rtSelected').removeClass("rtSelected"); $selectedNodeElement = $(cachedSelectedNode.get_element()); $selectedNodeElement.find('div').addClass("rtSelected"); function ClientNodeClicking(sender, args) if (!cachedSelectedNode) cachedSelectedNode = sender.get_selectedNode(); </script><sitefinity:SiteMapNavigationTreeView runat="server" ID="RTV" OnClientNodeClicked="ClientNodeClicked" OnClientNodeClicking="ClientNodeClicking" />Hi Jen,
The script works marvelously.
But I expected that there will be some simple property to enable/disable highlight onclick.
Thanks for your help.
Regards
David
You're welcome, David! :)
Greetings,
Jen Peleva
the Telerik team