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

Disable Click/Style on RootItem

6 Answers 102 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 2
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 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

6 Answers, 1 is accepted

Sort by
0
Schlurk
Top achievements
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:

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
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
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 :)
0
Ron
Top achievements
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.

<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
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
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 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.
Tags
Menu
Asked by
Ron
Top achievements
Rank 2
Answers by
Schlurk
Top achievements
Rank 2
Ron
Top achievements
Rank 2
Share this question
or