Possible to load context menu base entries with AJAX?

6 posts, 1 answers
  1. Thomas Luck
    Thomas Luck avatar
    39 posts
    Member since:
    Jun 2006

    Posted 26 Mar 2009 Link to this post

    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!
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Mar 2009 Link to this post

    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.
  3. Thomas Luck
    Thomas Luck avatar
    39 posts
    Member since:
    Jun 2006

    Posted 26 Mar 2009 Link to this post

    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.
  4. Thomas Luck
    Thomas Luck avatar
    39 posts
    Member since:
    Jun 2006

    Posted 30 Mar 2009 Link to this post

    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?
  5. Thomas Luck
    Thomas Luck avatar
    39 posts
    Member since:
    Jun 2006

    Posted 30 Mar 2009 Link to this post

    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".
  6. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Mar 2009 Link to this post

    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.
Back to Top