Possible to load context menu base entries with AJAX?

[Thomas Luck]

Hi, in the Telerik ASP.NET Ajax TreeView it is easily possible to dynamically load context menu child entries by specifying (for example) ExpandMode.WebService on a context menu item, and by specifying a webservice.

Now, as I need to have not only the child items dynamically loaded, but also the "base" items: how is it possible to do this also with AJAX? A webservice should be called when the context menu is requested - and the webservice could just return RadMenuItemData[]...

Greetings!

[Atanas Korchev]

Hello Thomas Luck,

I have attached a sample project which demonstrates how to populate the root items from web service.

I hope this helps,
Albert
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Thomas Luck]

Thank you very much in advance, after looking at the example, I get the idea how to do it. I'll test the implementation in our environment now.

[Thomas Luck]

Hi Albert

Thank you again for your solution - with it, I can successfully create the menu items!

However, I have trouble with the "Value" property...

The following code creates my menu items on the server side, in a webservice (asmx):

private static RadMenuItemData createContextMenuItem(string text, string value, bool loadOnDemand)
{
         RadMenuItemData item = new RadMenuItemData();
            item.Text = HttpUtility.HtmlEncode(text);
            item.Value = value;
            item.PostBack = false;
            item.Attributes["Value"] = value;
            if (loadOnDemand)
            {
                item.ExpandMode = MenuItemExpandMode.WebService;
            }
            return item;
        }
    }

On the client side, however, the method get_value() returns NULL. The method get_text(), on the other hand, works fine, and even the ExpandMode is set correctly... here's my client side code:

function ContextMenuClick(sender, args) {

   var node = args.get_node();

   var menuItem = args.get_menuItem();

   alert('menuItem.get_value(): ' + menuItem.get_value()); // returns NULL

   // try using attributes as a workaround...
   var attributes = menuItem.get_attributes();
   var attrValue = attributes.getAttribute('Value');
   alert('attrValue: ' + attrValue); // returns "undefined"
}

Do you have an idea what could be wrong?

[Thomas Luck]

The webservice communication looks good... here's the return value from firebug:

{"d":[{"__type":"Telerik.Web.UI.RadMenuItemData","ExpandMode":0,"NavigateUrl":"","PostBack":false,"Target"
:"","IsSeparator":false,"CssClass":"","DisabledCssClass":"rmDisabled","ExpandedCssClass":"rmExpanded"
,"FocusedCssClass":"rmFocused","ClickedCssClass":"rmClicked","ImageUrl":"","HoveredImageUrl":"","ClickedImageUrl"
:"","DisabledImageUrl":"","ExpandedImageUrl":"","Text":"Neue Toplevel Zone","Value":"NewTopLevelZone"
,"Enabled":true,"Attributes":{"Value":"NewTopLevelZone"}},{"__type":"Telerik.Web.UI.RadMenuItemData"
,"ExpandMode":0,"NavigateUrl":"","PostBack":false,"Target":"","IsSeparator":false,"CssClass":"","DisabledCssClass"
:"rmDisabled","ExpandedCssClass":"rmExpanded","FocusedCssClass":"rmFocused","ClickedCssClass":"rmClicked"
,"ImageUrl":"","HoveredImageUrl":"","ClickedImageUrl":"","DisabledImageUrl":"","ExpandedImageUrl":""
,"Text":"Zone löschen","Value":"DeleteZone","Enabled":true,"Attributes":{"Value":"DeleteZone"}}
,{"__type":"Telerik.Web.UI.RadMenuItemData","ExpandMode":0,"NavigateUrl":"","PostBack":false,"Target"
:"","IsSeparator":false,"CssClass":"","DisabledCssClass":"rmDisabled","ExpandedCssClass":"rmExpanded"
,"FocusedCssClass":"rmFocused","ClickedCssClass":"rmClicked","ImageUrl":"","HoveredImageUrl":"","ClickedImageUrl"
:"","DisabledImageUrl":"","ExpandedImageUrl":"","Text":"Zone editieren","Value":"EditZone","Enabled"
:true,"Attributes":{"Value":"EditZone"}},{"__type":"Telerik.Web.UI.RadMenuItemData","ExpandMode":0,"NavigateUrl"
:"","PostBack":false,"Target":"","IsSeparator":false,"CssClass":"","DisabledCssClass":"rmDisabled","ExpandedCssClass"
:"rmExpanded","FocusedCssClass":"rmFocused","ClickedCssClass":"rmClicked","ImageUrl":"","HoveredImageUrl"
:"","ClickedImageUrl":"","DisabledImageUrl":"","ExpandedImageUrl":"","Text":"Neues CI","Value":"NewCI"
,"Enabled":true,"Attributes":{"Value":"NewCI"}},{"__type":"Telerik.Web.UI.RadMenuItemData","ExpandMode"
:0,"NavigateUrl":"","PostBack":false,"Target":"","IsSeparator":false,"CssClass":"","DisabledCssClass"
:"rmDisabled","ExpandedCssClass":"rmExpanded","FocusedCssClass":"rmFocused","ClickedCssClass":"rmClicked"
,"ImageUrl":"","HoveredImageUrl":"","ClickedImageUrl":"","DisabledImageUrl":"","ExpandedImageUrl":""
,"Text":"CI verschieben","Value":"MoveCI","Enabled":true,"Attributes":{"Value":"MoveCI"}},{"__type":"Telerik
.Web.UI.RadMenuItemData","ExpandMode":0,"NavigateUrl":"","PostBack":false,"Target":"","IsSeparator":false
,"CssClass":"","DisabledCssClass":"rmDisabled","ExpandedCssClass":"rmExpanded","FocusedCssClass":"rmFocused"
,"ClickedCssClass":"rmClicked","ImageUrl":"","HoveredImageUrl":"","ClickedImageUrl":"","DisabledImageUrl"
:"","ExpandedImageUrl":"","Text":"Neue Unter-Toplevel Zone","Value":"NewSubTopLevelZone","Enabled":true
,"Attributes":{"Value":"NewSubTopLevelZone"}},{"__type":"Telerik.Web.UI.RadMenuItemData","ExpandMode"
:1,"NavigateUrl":"","PostBack":false,"Target":"","IsSeparator":false,"CssClass":"","DisabledCssClass"
:"rmDisabled","ExpandedCssClass":"rmExpanded","FocusedCssClass":"rmFocused","ClickedCssClass":"rmClicked"
,"ImageUrl":"","HoveredImageUrl":"","ClickedImageUrl":"","DisabledImageUrl":"","ExpandedImageUrl":""
,"Text":"Neue Zone","Value":"NewZone","Enabled":true,"Attributes":{"Value":"NewZone"}}]}

Even the attribute is there. But somehow get_value() returns NULL, and the attribute is "undefined".

[Atanas Korchev]

Hi Thomas Luck,

The example I've sent you is not initializing the value from the web service result. You should do this by code like this:

for (var i = 0; i < result.length; i++)
{
       var item = new Telerik.Web.UI.RadMenuItem();
       item.set_text(result[i].Text);
       item.set_value(result[i].Value);
       item.set_expandMode(result[i].ExpandMode);
       menu.get_items().add(item);
}

Regards,
Albert
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.