RadMenu Add Child Menu Item to Parent Menu Item

[Joe]

Hi

I have been searching all over for a solution to this problem and have not found a thing. I have a horizontal RadMenu that I am manipulating via the Telerik Client Side API. The RadMenu is created server side. This menu is dynamic so it can have however many items the user defines it to have.

 What I would like to do is, take X Rad Menu Items after the 6th item and add them under a parent RadMenu Item using the Telerik Client Side API. It is very easy to add an item to the menu, but I have not found a solution to add a child item to a parent item. Here is my code.

<script> 

function AddMenuItems() {

            var menu = $find("<%= testMenu.ClientID %>")
            menu.trackChanges();

            var parentItem = new Telerik.Web.UI.RadMenuItem();

            parentItem.set_text("More...");
            menu.get_items().add(parentItem);

            var childItem = new Telerik.Web.UI.RadMenuItem();
            childItem.set_text("child");
    menu.get_items().insert((menu.get_allItems().length), childItem);
            menu.commitChanges();
        }

    </script>
    
    <AxnMenus:AxnMenu ID="testMenu" runat="server" OnClientLoad="AddMenuItems">
    <Items>
        <AxnMenus:AxnMenuItem Text="item 1" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 2" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 3" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 4" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 5" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 6" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 7" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 8" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 9" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 10" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 11" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 12" runat="server"/>
        <AxnMenus:AxnMenuItem Text="item 13" runat="server"/>
    </Items>
    </AxnMenus:AxnMenu>
    

</asp:content>

[Ivan Danchev]

Hello,

Adding a RadMenu item as a child to another item on the client can be done as shown below:

<script type="text/javascript">

    function OnClientClicked(sender, args) {

        var menu = $find("<%= RadMenu1.ClientID %>");

        var rootItem = menu.findItemByText("Root1");


        menu.trackChanges();

        var childItem = new Telerik.Web.UI.RadMenuItem();

        childItem.set_text("AddedClientSide");

        rootItem.get_items().insert(0, childItem);

        menu.commitChanges();

    }

</script>

<telerik:RadButton ID="RadButton1" Text="AddMenuItems" runat="server" OnClientClicked="OnClientClicked" AutoPostBack="false" />

The example shows adding a child item with text "AddedClientSide" to an item with text "Root1" at index 0.

After accessing the Items collection (get_items()) of the item you want to add a child item to, you can use either its add() or insert() client-side method. The latter allows to specify the index you want to add the child item at.

Regards,
Ivan Danchev
Telerik

[Joe]

Thanks Ivan. I just figured it out this morning. I had to use the getItem after get_items, then add. Your post shows that the INSERT, can also work this way, which is great.