This is a migrated thread and some comments may be shown as answers.

RadMenu Add Child Menu Item to Parent Menu Item

2 Answers 181 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 13 Aug 2015, 01:20 AM

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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 13 Aug 2015, 04:24 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Joe
Top achievements
Rank 1
answered on 13 Aug 2015, 04:31 PM
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.
Tags
Menu
Asked by
Joe
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Joe
Top achievements
Rank 1
Share this question
or