Infragistics Aikido WebDataMenu control has extensive (albeit poorly documented) client-side library of classes, method and properties. 2 methods addItem and removeItem supposedly allow you to add/remove menu items in JavaScript. These methods have been public since 9.2 release probably even earlier, but have a lot of drawbacks, one of the major ones – for every method call an AJAX call to server is made, which slows performance dramatically, breaks code flow and won’t let you set properties of newly added item.

Method described below is a bit of a hack, but it works purely client-side, no slow round trips, no waiting for AJAX call to return and you have full control of all menu items. The idea is to define menu structure in advance, anticipating maximum number of items possible, then at runtime, assign properties of needed items and hide extra ones. In this example method is applied to Root items (as a matter of fact it is used for a context menu), but can be as easily applied to children.

First let’s define menu structure, anticipating up to 20 menu items:

...
        <Items>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        </Items> 
...

And here’s the code that populates menu items dynamically

var oMenu = $find('xwdmMyMenu');
var aMenuItems = oMenu.getItems();
var oMenuItem;

var aMenuItemText = 'Open,Close,Delete,Update'.split(',');

for (var I = 0; I < aMenuItemText.length; I++) {
    oMenuItem = aMenuItems.getItem(I);
    oMenuItem.set_text(aMenuItemText[I]);
    oMenuItem.set_key(Math.random());
    oMenuItem.get_element().style.display = 'block';
}

This sample uses array of 4 strings to populate menu items’s text. It also set the keys to demonstrate access to menu item properties. Last line explicitly makes menu item visible thru DOM element’s style.

Finally we need to hide the rest of the menu items:

for (var J = I; J < aMenuItems.getChildrenCount(); J++) {
    oMenuItem = aMenuItems.getItem(J);
    oMenuItem.get_element().style.display = 'none'
}

This snippet loops thru the rest of the menu items, hiding them, again thru DOM element’s style. The result – dynamically created menu.