Disable Click/Style on RootItem

7 posts, 1 answers
  1. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 03 Dec 2009 Link to this post

    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 ObjectByVal 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
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 03 Dec 2009 Link to this post

    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.
  3. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 04 Dec 2009 Link to this post

    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
  4. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 04 Dec 2009 Link to this post

    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 :)
  5. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 04 Dec 2009 Link to this post

    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!
  6. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 04 Dec 2009 Link to this post

    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.
  7. Answer
    Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 04 Jan 2010 Link to this post

    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 ObjectByVal 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.
Back to Top