RadMenu Add Child Menu Item to Parent Menu Item

3 posts, 1 answers
  1. Joe
    Joe avatar
    4 posts
    Member since:
    Apr 2014

    Posted 12 Aug 2015 Link to this post

    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. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 13 Aug 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joe
    Joe avatar
    4 posts
    Member since:
    Apr 2014

    Posted 13 Aug 2015 in reply to Ivan Danchev Link to this post

    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.
Back to Top