How to bind kendo-menu to remote datasource?

Question

below is my code

$("#lhsPanelBar").kendoMenu({
    orientation: 'vertical',
    dataSource:
        {
            type: 'json',
            transport:  {
                    read: "http://localhost:3549/api/LHSMenu"
                }
        },
});

but there is not server hit on controller and menu is displayed as "undefined".

Controller code

public class LHSMenuController : ApiController
{
    private IRepo repo;
    public LHSMenuController()
    {
        repo = new Repository();
    }

    [HttpGet]
    public IEnumerable<LHSMenu> GetLHSMenu()
    {
        return this.repo.Menu;
    }
}

Answer 1

The Kendo UI Menu doesn't support binding to a remote data source for the time being.

Answer 2

The kendo menu cannot do it directly but you can use the change method of a data source and create the menu from this function, try this:

var menuDataSource = new kendo.data.DataSource({
                      transport: {
                            read: {
                              url: "/app/test/menuItems",
                              dataType: "json"
                            }
                          },
                        change: function() {
                            var dataMenu = this.data(); 
                            console.log("from change: " + dataMenu.length);
                            for (var indexMenuDataSource = 0; indexMenuDataSource < dataMenu.length; indexMenuDataSource++) {
                                var objectToPut = {};
                                var data = dataMenu[indexMenuDataSource];
                                objectToPut.text = data.text;
                                objectToPut.url = data.url;
                                objectToPut.cssClass = data.cssClass;
                                objectToPut.imageUrl = data.imageUrl;
                                if(data.items.length > 0){
                                    objectToPut.items = [];
                                    for(var indexSubItem = 0; indexSubItem < data.items.length; indexSubItem++){
                                        var subItem = {};
                                        subItem.text = data.text;
                                        subItem.url = data.url;
                                        subItem.cssClass = data.cssClass;
                                        subItem.imageUrl = data.imageUrl;
                                        objectToPut.items.push(subItem);                                            
                                    }
                                }
                                menu.insertAfter(objectToPut,  menu.element.children("li:last"));
                            }
                        }
            });

            var menu = $("#menuTest").kendoMenu().data("kendoMenu");
            menuDataSource.read(); //Will launch the change function

Note: It is a draft, create another function to iterate over sub > sub > sub items.

Answer 3

You should return your result in a json friendly format for the Menu. Try this:

[HttpGet]
public IEnumerable<LHSMenu> GetLHSMenu()
{
    return Json(this.repo.Menu,JsonBehavoir.AllowGet);
}