RadMenuItem - disable root click

10 posts, 1 answers
  1. Marc
    Marc avatar
    10 posts
    Member since:
    Mar 2008

    Posted 29 Nov 2010 Link to this post

    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
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Nov 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marc
    Marc avatar
    10 posts
    Member since:
    Mar 2008

    Posted 30 Nov 2010 Link to this post

    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"


  5. rahul
    rahul avatar
    4 posts
    Member since:
    Nov 2010

    Posted 03 Dec 2010 Link to this post

    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.
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 07 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  7. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 21 Dec 2012 Link to this post

    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?
  8. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 25 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 28 Dec 2012 Link to this post

    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.
  10. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 02 Jan 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 22 Jun in reply to Marc Link to this post

    Hi Marc,

         Your solution worked for me.  Thanks!

    Sincerely,

    Keith Jackson

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017