[Solved] Client side events for sub MenuItem

[Meera]

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

[Boyan Dimitrov]

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