Browser exception while removing menu items using IE 10

[Mike]

Hello,

We've run into a fairly obscure but critical issue when removing menu items client-side using IE 10. This seems to be an IE 10-only bug - does not occur for other versions of IE or Chrome or Firefox I believe. If there is code like this:

        var historyItems = historyMenu.get_items();
historyItems.removeAt(0);

and there is only one menu item in the list, IE 10 will throw an exception:

Error: NoModificationAllowedError

inside of Telerik script. This line:

if($telerik.isIE&&s){s.outerHTML="";

Call stack is:

_purgeEmptyGroup
_childRemoved
remove
removeAt

We're using the very latest Telerik release. 2012.3.1205.40

Please advise,

Thank you,

- Mike Oliver

[Boyan Dimitrov]

Hello Mike,

Could you please try to reproduce the described exception with our online demo, which demonstrates add/remove menu items client-side? Please find attached a sample project that removes menu item at position 0 by clicking on the button. Please let us know whether you are facing same exception with the attached project?

Regards,
Boyan Dimitrov
the Telerik team

[Mike]

Boyan,

The bug is reproducible with your online demo:

http://demos.telerik.com/aspnet-ajax/menu/examples/programming/addremovedisableitemsclientside/defaultcs.aspx 

Steps:

Using IE 10 (Windows 8/desktop mode):

- Individually select menu items under the Books menu heading
- After the menu item is selected, click on the Delete Selected Item button on the right.
- Repeat until there are no menu items. When you get to the last item in the list and then click on Delete Selected Item, you will get the IE browser exception described in my original post.
- The key to this bug is that when you remove the last menu item, the browser exception occurs, because the Telerik script functions outlined in my original post are then called, specifically _purgeEmptyGroup, which contains the script line that generates the IE browser exception.

Can you reproduce on your end given the above steps?

Thanks,

- Mike

[Mike]

Regarding the project you sent me, it doesn't exactly duplicate the scenario. The project has a RadMenu w/ 3 "root" menu items. Your code is deleting each root menu. (Note by the way that the code demonstrates what might be a different bug - you can't delete the last root menu item - Clicking on the Remove! button does nothing when on the last root menu item).

The scenario that produces the browser error is when removing the sub-items. In your example, that would be the "Item 1", "Item 2", and "Item 3". If you modify the ClickClicked function to be this:

function ClientClicked(sender, args) {
    var menu = $find("<%= RadMenu1.ClientID %>");
    var root1 = menu.get_items().getItem(0);
    root1.get_items().removeAt(0);
}

Again, using IE 10, you'll see the browser exception after you click the Remove! button the third time, since the first root menu has 3 items. Make sense? Can you reproduce on your end?

Thanks for you assistance,

- Mike Oliver

[Boyan Dimitrov]

Hello Mike,

Your observations are absolutely  correct and I reproduced the JavaScript exception NoModificationAllowedError by deleting the last sub level item. This behavior is actually a misbehavior so I logged it as a bug in our system for future fixing.
Thank you for your cooperation.

Regards,
Boyan Dimitrov
the Telerik team

[Boyan Dimitrov]

Hello,

I would like to clarify that the issue is resolved in our RadControls Q1 2013 official release. 

Regards,
Boyan Dimitrov
the Telerik team