RadMenu get_count() does not change after menu.get_items().remove(...)

7 posts, 1 answers
  1. Ioannis
    Ioannis avatar
    5 posts
    Member since:
    Dec 2010

    Posted 30 Mar 2012 Link to this post

    Does anyone know how to refresh the get_count() value after removing a menu item on client side?
    I use the following to remove the menu header item after the last child item is removed but the get_count() function keeps returning the maximum amount of child items that were created by get_items().add(...).

    Here is the code I use:

    function AddNewMenuItem(itemText,itemValue) {
        var menu = $find(MainMenu_ID);
        var menuTabsItem = menu.findItemByText("Tabs");
        var menuItem = new Telerik.Web.UI.RadMenuItem();
        if (!menuTabsItem) {
            menuItem.set_text("Tabs");
            menuItem.set_value("");
            menu.get_items().add(menuItem);
            menuTabsItem = menu.findItemByText("Tabs");
        }
        menuItem = new Telerik.Web.UI.RadMenuItem();
        menuItem.set_text(itemText);
        menuItem.set_value(itemValue);
        menuTabsItem.get_items().add(menuItem);
    }
     
    function RemoveMenuItem(itemValue) {
        var menu = $find(MainMenu_ID);
        var menuTabsItem = menu.findItemByText("Tabs");
        var menuTabsItemToRemove = menu.findItemByValue(itemValue);
        if (menuTabsItem) {
            alert("a " + menuTabsItem.get_items().get_count())
            menu.get_items().remove(menuTabsItemToRemove);
            alert("b " + menuTabsItem.get_items().get_count())
            if (menuTabsItem.get_items().get_count() == 0) {
                menu.get_items().remove(menuTabsItem);
            }
        }
    }

    It works to add and remove items under the item "Tabs" but when a child item is removed from the menu "Tabs" the get_count() returns the same value for point "a" and point "b" in the alert functions of RemoveMenuItem. Just to make myself clear, the item does get removed as expected.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 02 Apr 2012 Link to this post

    Hi Ioannis,

    You can try using trackchanges() and commitChanges() methods of the RadMenu control as described in the following help article -  RadMenu Item Collection.

    Kind regards,
    Kate
    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
  4. Ioannis
    Ioannis avatar
    5 posts
    Member since:
    Dec 2010

    Posted 06 Apr 2012 Link to this post

    My apologies for the delayed response, and thank you for taking the time to reply.
    I do not see how track and commit Changes could make a difference since this page does not postback ever. However I tried calling menu.trackChanges() right after the declaration of var menu..... and menu.commitChanges() at the end of the functions but the problem remains.
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 10 Apr 2012 Link to this post

    Hi Ioannis,

    I tested the scenario that you describe using the code below but I am not able to get the behavior that you describe. Please give it a try and let me know how it goes from your side and if I am missing something:
    <script type="text/javascript">
            function OnClientLoad() {
                var menu = $find("<%= menu1.ClientID %>");
                var items = menu.get_items();
                for (var i = 0; i < items.get_count(); i++) {
                    alert(items.getItem(i).get_text());
     
                } alert(items.get_count());
            }
            function AddNewItem() {
                var menu = $find("<%= menu1.ClientID %>");
                var menuItem = new Telerik.Web.UI.RadMenuItem();
                menuItem.set_text("New Item");
                menu.trackChanges();
                menu.get_items().add(menuItem);
                menu.commitChanges();
     
                var items = menu.get_items();
                for (var i = 0; i < items.get_count(); i++) {
                    alert(items.getItem(i).get_text());
     
                } alert(items.get_count());
            }      
        </script>

    markup:
    <telerik:RadMenu runat="server" ID="menu1" OnClientLoad="OnClientLoad" OnClientItemClicked="AddNewItem">
                <Items>
                    <telerik:RadMenuItem Text="item1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="item2">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>

    Regards,
    Kate
    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.
  6. Ioannis
    Ioannis avatar
    5 posts
    Member since:
    Dec 2010

    Posted 10 Apr 2012 Link to this post

    Hi Kate, yes, you are missing that this is about the menu.get_items().remove(...) function and not the add() function. The example that you tried only adds items to the menu. You have to have a function that removes items and you will see that the get_count() does not decrease at any time.
  7. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Apr 2012 Link to this post

    Hello Ioannis,

    I also tested the scenario when I remove items using only client-side function with the 2012.1.215.35 version of our controls. Below you can find the code that I used. The get_count() method works as expected from my side - it does detect when items are removed and returns a different value:
    function remove() {
     
              var menu = $find("<%= menu1.ClientID %>");
              var menuItem = menu.get_items().getItem(0);
              menu.trackChanges();
              menu.get_items().remove(menuItem);
              menu.commitChanges();
              var items = menu.get_items();
              for (var i = 0; i < items.get_count(); i++) {
                  alert(items.getItem(i).get_text());
     
              } alert(items.get_count());
          }

    markup:
    <telerik:RadMenu runat="server" ID="menu1" Skin="Vista" OnClientLoad="OnClientLoad"
                OnClientItemClicked="remove">
                <Items>
                    <telerik:RadMenuItem Text="item1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="item2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="item3">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>

    If this does not help I would suggest that you open a support ticket and send me a simplified runnable project that I can inspect locally and see what is causing the problematic behavior.

    Regards,
    Kate
    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.
  8. Ioannis
    Ioannis avatar
    5 posts
    Member since:
    Dec 2010

    Posted 13 Apr 2012 Link to this post

    Hi Kate, per your request, I submitted a sample website that demonstrates the problem in the support ticket.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017