Hi,
I have a dynamic menu fully through JavaScript which acts as a context menu and items keeps on changing based on the selection. The issue that I face is with rendering. First time when menu is invoked, it renders properly and all sub menus comes properly. However when same invoked second time, it seems each menu have different width and some of the images that lies underneath is visible through menu. See the image & code attached.
function resetMenu(menu) {
menu.get_items().clear();
}
function addMenuItem(menu, caption, value) {
var item = new Telerik.Web.UI.RadMenuItem();
item.set_text(caption);
item.set_value(value);
item.set_visible(
true);
menu.get_items().add(item);
}
function buildMenu(key) {
var menu = $find("<%= radActionMenu.ClientID %>");
var id = key.substring(key.indexOf("-", 0) + 1, key.length);
menu.trackChanges();
resetMenu(menu);
if (key.substring(0, 1) == "1") addMenuItem(menu, "View ", "1-" + id)
if (key.substring(1, 2) == "1") addMenuItem(menu, "Issue ", "2-" + id)
if (key.substring(2, 3) == "1") addMenuItem(menu, "Issue ", "3-" + id)
if (key.substring(3, 4) == "1") addMenuItem(menu, "History", "4-" + id)
if (key.substring(4, 5) == "1") addMenuItem(menu, "Add Add Add Add", "5-" + id)
menu.commitChanges();
}
function showMenu(e, key) {
var contextMenu = $find("<%= radActionMenu.ClientID %>");
$telerik.cancelRawEvent(e);
if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {
buildMenu(key);
contextMenu.show(e);
}
}
<telerik:RadContextMenu ID="radActionMenu" runat="server" EnableRoundedCorners="True"
EnableShadows="True" OnClientItemClicked="onClicked" CausesValidation="False"
EnableViewState="False" ExpandDelay="50" >
<Items>
</Items>
</telerik:RadContextMenu>