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

[Ioannis]

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.

[Kate]

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

[Ioannis]

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.

[Kate]

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

[Ioannis]

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.

[Kate]

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

[Ioannis]

Hi Kate, per your request, I submitted a sample website that demonstrates the problem in the support ticket.