This is a migrated thread and some comments may be shown as answers.

Disable Click/Style on RootItem

6 Answers 255 Views

This is a migrated thread and some comments may be shown as answers.

Ron asked on 03 Dec 2009, 10:14 PM

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

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:

    
            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.

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

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):

    
            <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 :)

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.

    
            <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!

Accepted

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:

    
                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.