RadMenuItem - disable root click

[Marc]

We are setting the selected menu root from code to help show end users what menu item they are on.
code (code used on all child menus of Parent)

        If Not Page.IsPostBack Then
            Dim rMnu As Telerik.Web.UI.RadMenu
            rMnu = CType(Master.FindControl("FLSRadMenu"), Telerik.Web.UI.RadMenu)
            If Not rMnu Is Nothing Then
                rMnu.Items(1).Selected = True
            End If
        End If

Issue: a user can select another parent (root) menu item and this becomes "selected", when really the meny item set in code is still selected.

I want to be able to disable clicking on all root menu items.

Thanks in advance

[Princy]

Hello,


You need to attach the "OnClientItemClicking" cleint event to RadMenu and check for whether the clicked item is rootitem. If so, cancel the event using the code " args.set_cancel(true) ".


Thanks,
Princy.

[Marc]

Solved!

Added the following code

<script type="text/javascript">
    function OnClientItemClicking(sender, args) {
        if (args.get_item().get_items().get_count() != 0 && args.get_item().get_level() ==0) {
            args.set_cancel(true); // Cancel the event
        }
    }
</script>  

and

 OnClientItemClicking="OnClientItemClicking"

[rahul]

Hi,
I want to have rounded corners for my submenu items in Radmenu.
I m using a background image and skin is Default.
Please suggest me to do that and the changes in Css file.
I want rounded corners in bottom part only.

[Yana]

Hello rahul,

RadMenu has rounded corners since Q1 2010 release - please set EnableRoundedCorners property to true in order to enable them.

Greetings,
Yana
the Telerik team

[Ron]

I have tried hooking into the OnClientItemClicking with the previously mentioned code, but when I do this, it still does not stop from applying the Selected CSS to the item.  Is there anyway of canceling this affect from happening?

[Ivan Zhekov]

Hello, Ronald.

Selecting an item and preventing the decoration are two different things.

For instance, there are two class names that define the appearance of an item: one is rmSelected and the other is rmFocused. While you can effectively prevent the rmSelected class from ever being set, by setting the EnableSelection="false" e.g.

<telerik:RadMenu runat="server" EnableSelection="false">
    <Items>
        <telerik:RadMenuItem Text="Item 1" />
        <telerik:RadMenuItem Text="Item 2" />
        <telerik:RadMenuItem Text="Item 3" />
        <telerik:RadMenuItem Text="Item 4" />
        <telerik:RadMenuItem Text="Item 5" />
    </Items>
</telerik:RadMenu>

there is little you can do about the rmFocused class -- the class is set internally whenever an item receives focus. You could override it's behaviour e.g. appearance but that's about it.

Regards,
Ivan Zhekov
the Telerik team

[Ron]

Unfortunately, this does not work for my situation.  I basically want to prevent the selected CSS from applying to the root level items when they are selected.  The method you are showing me will prevent any selected CSS from applying at any level.

[Kate]

Hi Ron,

Try using the following css class selectors in a combination with the CssClass property of the RadMenuItems:

div.RadMenu_Default .rmFirst a.rmLink.new,
div.RadMenu_Default .rmFirst a.rmLink.new:hover,
div.RadMenu_Default  a.rmLink.new1,
div.RadMenu_Default  a.rmLink.new1:hover,
div.RadMenu_Default  a.rmLink.new2,
div.RadMenu_Default  a.rmLink.new2:hover,
div.RadMenu_Default  a.rmLink.new3,
div.RadMenu_Default  a.rmLink.new3:hover,
div.RadMenu_Default .rmLast a.rmLink.new4,
div.RadMenu_Default .rmLast a.rmLink.new4:hover {
    background-position: 0 -407px;
}

markup:

<telerik:RadMenu ID="RadMenu2" Skin="Default" runat="server">
                <Items>
                    <telerik:RadMenuItem Text="Item 1" CssClass="new">
                        <Items>
                            <telerik:RadMenuItem Text="Item 1" />
                            <telerik:RadMenuItem Text="Item 2" />
                            <telerik:RadMenuItem Text="Item 3" />
                            <telerik:RadMenuItem Text="Item 4" />
                            <telerik:RadMenuItem Text="Item 5" />
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item 2" CssClass="new1">
                        <Items>
                            <telerik:RadMenuItem Text="Item 1" />
                            <telerik:RadMenuItem Text="Item 2" />
                            <telerik:RadMenuItem Text="Item 3" />
                            <telerik:RadMenuItem Text="Item 4" />
                            <telerik:RadMenuItem Text="Item 5" />
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item 3" CssClass="new2">
                        <Items>
                            <telerik:RadMenuItem Text="Item 1" />
                            <telerik:RadMenuItem Text="Item 2" />
                            <telerik:RadMenuItem Text="Item 3" />
                            <telerik:RadMenuItem Text="Item 4" />
                            <telerik:RadMenuItem Text="Item 5" />
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item 4" CssClass="new3" />
                    <telerik:RadMenuItem Text="Item 5" CssClass="new4" />
                </Items>
            </telerik:RadMenu>

Note that if you use any skin that is different from the Default one you will need to change the name selector so it corresponds to the skin name.

All the best,
Kate
the Telerik team

[Keith]

Hi Marc,

     Your solution worked for me.  Thanks!

Sincerely,

Keith Jackson