Client side events for sub MenuItem

2 posts, 0 answers
  1. Meera
    Meera avatar
    3 posts
    Member since:
    Jan 2013

    Posted 11 Apr 2013 Link to this post

    Hi,

    I have created a menu with menu items and further sub menu items under them.

    Example:

       
    <telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true"   >
    <Items>
            <telerik:RadMenuItem Text="File" AccessKey="F" >
            <Items>
                   <telerik:RadMenuItem ImageUrl="~/Images/Address1.bmp" Text="Add"   />
                   <telerik:RadMenuItem ImageUrl="~/Menu/Images/12open.gif" Text="Open" />
            </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Edit" AccessKey="E">
            <Items>
                  <telerik:RadMenuItem ImageUrl="~/Menu/Images/11new.gif" Text="Cut" />
                  <telerik:RadMenuItem ImageUrl="~/Menu/Images/12open.gif" Text="Copy" />
             </Items>
             </telerik:RadMenuItem>
    </Items>
    </telerik:RadMenu>

    I would like to add OnClientItemClicked only for the sub menu items like Add, Open, Cut and Copy but not for the main menu items like File and Edit. When I add the OnClientItemClicked to the RadMenu, it disables the properties of the menu. Any help will be appreciated.

    Thanks,
    Meera


  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 16 Apr 2013 Link to this post

    Hello Meera,

    Thank you for contacting Telerik Support.

    The RadMenu built-in client-side functionality gives you the ability to retrieve the clicked menu item text or value. Therefore you are able to implement a functionality which will be executed only when user clicks on specific menu items -  Add, Open, Cut and Copy. This will avoid executing that functionality if user click on any other menu item. The sample code below shows how you can get the clicked item text and compare to a specific value.
    //markup code
    <telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" OnClientItemClicked="ClientItemClicked">
        <Items>
            <telerik:RadMenuItem Text="File" AccessKey="F">
                <Items>
                    <telerik:RadMenuItem ImageUrl="~/Images/Address1.bmp" Text="Add" />
                    <telerik:RadMenuItem ImageUrl="~/Menu/Images/12open.gif" Text="Open" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Edit" AccessKey="E">
                <Items>
                    <telerik:RadMenuItem ImageUrl="~/Menu/Images/11new.gif" Text="Cut" />
                    <telerik:RadMenuItem ImageUrl="~/Menu/Images/12open.gif" Text="Copy" />
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
    //JavaScript
    function ClientItemClicked(sender, args) {
        if (args.get_item().get_text() == "Copy") {
            //here goes your custom functionality
        }
    }

    Hope that this will be helpful.

    Kind regards,
    Boyan Dimitrov
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top