Hello,
I am trying to figure out how to disable the ability to click a root item in the RadMenu control or at least stop the selected style from applying to it. The radmenu is populated via a sitemap file and the root nodes do not have a URL defined for them. I have tried to set all root items with the postback of false via the code below:
| Protected Sub rmMainMenu_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) _ |
| Handles rmMainMenu.DataBound |
| For Each rootItem As RadMenuItem In sender.Items |
| rootItem.PostBack = False |
| Next |
| End Sub |
However, this doesn't do anything and I can still click the node and when I do, the clicked style will still apply. The only time I want the clicked selected style to apply to the root node is if a child node has been selected. Any assistance would be greatly appreciated.
Thanks,
Ron
6 Answers, 1 is accepted
0
Schlurk
Top achievements
Rank 2
Rank 2
answered on 03 Dec 2009, 10:37 PM
You could subscribe to the OnClientItemClicking event and then cancel the event when you find your node:
I think that should take care of it.
| function onClicking(sender, eventArgs) |
| { |
| var item = eventArgs.get_item(); |
| //root node should be 0 |
| if (item.get_index() == 0) |
| { |
| eventArgs.set_cancel(false); |
| } |
| } |
I think that should take care of it.
0
Ron
Top achievements
Rank 2
Rank 2
answered on 04 Dec 2009, 04:22 PM
I added this, but I am getting an error, below is my markup for the radmenu and the code you provided and following is the error:
| function onClicking(sender, eventArgs) { |
| var item = eventArgs.get_item(); |
| if (item.get_index() == 0); |
| { |
| eventArgs.set_cancel(false); |
| } |
| } |
| <telerik:RadMenu ID="rmMainMenu" runat="server" DataSourceID="topMenu" CssClass="mainmenu" Width="100%" OnClientItemClicking="onClicking();" /> |
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; Tablet PC 2.0)
Timestamp: Fri, 4 Dec 2009 16:21:33 UTC
Message: Expected '}'
Line: 145
Char: 1143
Code: 0
URI: http://mtcdev:603/
Message: 'null' is null or not an object
Line: 58
Char: 21
Code: 0
URI: http://mtcdev:603/
Thanks,
Ron
0
Schlurk
Top achievements
Rank 2
Rank 2
answered on 04 Dec 2009, 05:53 PM
The following works for me (I forgot to place the ".." around the 0 in my previous code):
This cancels the clicking :)
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| <telerik:RadCodeBlock ID="myCodeBlock" runat="server"> |
| <script type="text/javascript"> |
| function onClicking(sender, eventArgs) { |
| var item = eventArgs.get_item(); |
| if (item.get_index() == "0"); |
| { |
| eventArgs.set_cancel(false); |
| } |
| } |
| </script> |
| </telerik:RadCodeBlock> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemClicking="onClicking"> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1" Selected="false"> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3"> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenu> |
| </form> |
| </body> |
| </html> |
This cancels the clicking :)
0
Ron
Top achievements
Rank 2
Rank 2
answered on 04 Dec 2009, 06:44 PM
For some reason this still is not working for me. Just in case I am doing something wrong below is my entire markup for the page. Right now it still applies the selected style to it when I click on it.
Thanks for the quick replies!
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Messaging Administration Center</title> |
| <link href="Appearance/Styles/StyleSheet.css" rel="stylesheet" type="text/css" /> |
| <telerik:RadStyleSheetManager id="RadStyleSheetManager" runat="server" /> |
| <telerik:RadCodeBlock ID="myCodeBlock" runat="server"> |
| <script type="text/javascript"> |
| function onClicking(sender, eventArgs) { |
| var item = eventArgs.get_item(); |
| if (item.get_index() == "0"); |
| { |
| eventArgs.set_cancel(false); |
| } |
| } |
| function pageLoad() { |
| var divContainer = $find('<%= bottomLeftPane.ClientID %>'); |
| var panelbar = $find('<%= RadPanelBar1.ClientID %>'); |
| divContainer.set_minHeight(panelbar.get_element().offsetHeight); |
| divContainer.set_maxHeight(panelbar.get_element().offsetHeight); |
| } |
| </script> |
| </telerik:RadCodeBlock> |
| </head> |
| <body> |
| <form id="masterForm" runat="server"> |
| <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Office2007" /> |
| <telerik:RadScriptManager ID="RadScriptManager" runat="server"> |
| <Scripts> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <telerik:RadSplitter runat="Server" ID="RadSplitter1" Width="100%" BorderSize="0" |
| BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal" |
| VisibleDuringInit="false"> |
| <telerik:RadPane ID="headerPane" runat="server" Height="74px"> |
| <div class="header"> |
| <div class="logo"> |
| <div class="company"></div> |
| </div> |
| </div> |
| <telerik:RadMenu ID="rmMainMenu" runat="server" DataSourceID="topMenu" CssClass="mainmenu" Width="100%" OnClientItemClicking="onClicking" /> |
| </telerik:RadPane> |
| <telerik:RadPane runat="server" ID="contentPane" Scrolling="none"> |
| <telerik:RadSplitter runat="server" ID="RadSplitter2" BorderStyle="None" PanesBorderSize="0"> |
| <telerik:RadPane runat="Server" ID="leftPane" Width="240" Scrolling="None"> |
| <telerik:RadSplitter runat="server" ID="RadSplitter3" BorderStyle="None" PanesBorderSize="0" |
| Height="100%" Orientation="Horizontal"> |
| <telerik:RadPane runat="server" ID="topLeftPane"> |
| <asp:ContentPlaceHolder ID="cphBodyLeft" runat="server" /> |
| </telerik:RadPane> |
| <telerik:RadSplitBar runat="server" ID="RadSplitBar3" CollapseMode="Backward" EnableResize="false" /> |
| <telerik:RadPane runat="server" ID="bottomLeftPane"> |
| <telerik:RadPanelBar runat="server" ID="RadPanelBar1" DataSourceID="sideMenu" Width="100%" /> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| <telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" EnableResize="false" /> |
| <telerik:RadPane runat="Server" ID="rightPane" CssClass="right-pane" Scrolling="Both"> |
| <asp:ContentPlaceHolder ID="cphBodyRight" runat="server" /> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| <asp:SiteMapDataSource ID="topMenu" runat="server" ShowStartingNode="False" SiteMapProvider="topmenu" /> |
| <asp:SiteMapDataSource ID="sideMenu" runat="server" ShowStartingNode="False" SiteMapProvider="sidemenu" /> |
| <div class="user">Welcome Ron Montecalvo</div> |
| </form> |
| </body> |
| </html> |
Thanks for the quick replies!
0
Schlurk
Top achievements
Rank 2
Rank 2
answered on 04 Dec 2009, 09:12 PM
Ah sorry, I for some reason didn't pick up on the fact that you were looking to stop the style of being applied as well. I actually think you will have to change the actual CSS of the skin so that the style when hovering and selecting is the same as the normal one. I would see if you can look into this documentation article, and perhaps even the Visual Style Builder, since you will most likely have to create a more custom class.
0
Accepted
Ron
Top achievements
Rank 2
Rank 2
answered on 04 Jan 2010, 08:23 PM
After some testing and poking around, I finally figured out what I needed to do in order to remove the style from being applied to what I designate as a "root item" in which I do not want to have a navigation too nor have it apply the style as if it was selected.
Below is the code I used to achieve this:
In the above I define two custom attributes in my sitemap file. One is "visible" for those items I do not wish to be shown in the menu as a direct navigation link so I set the Visible property to "false". The other is "type" which I use to define an item as a "root" item. Here I set the NavigateUrl to "#" so it will not navigate to anything. I set the SelectedCssClass and FocusedCssClass to "" so that if a user clicks the item it does not apply any of the styles to it. However it will still allow the items to apply the correct style if a child item is selected.
Hope that helps anyone else looking to so the same.
Below is the code I used to achieve this:
| Protected Sub mainMenu_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadMenuEventArgs) _ |
| Handles mainMenu.ItemDataBound |
| Dim nodeFromSiteMap As SiteMapNode = CType(e.Item.DataItem, SiteMapNode) |
| 'Hide items I do not want to directly navigate too |
| e.Item.Visible = nodeFromSiteMap("visible") |
| 'If root item, set url to not navigate and do not apply styles when clicked |
| If nodeFromSiteMap("type") = "root" Then |
| e.Item.NavigateUrl = "#" |
| e.Item.SelectedCssClass = "" |
| e.Item.FocusedCssClass = "" |
| End If |
| End Sub |
In the above I define two custom attributes in my sitemap file. One is "visible" for those items I do not wish to be shown in the menu as a direct navigation link so I set the Visible property to "false". The other is "type" which I use to define an item as a "root" item. Here I set the NavigateUrl to "#" so it will not navigate to anything. I set the SelectedCssClass and FocusedCssClass to "" so that if a user clicks the item it does not apply any of the styles to it. However it will still allow the items to apply the correct style if a child item is selected.
Hope that helps anyone else looking to so the same.