kendo-ui - 如何将剑道菜单绑定到远程数据源？

Question

下面是我的代码

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

但控制器上没有服务器命中，菜单显示为“未定义”。

控制器代码

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

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

Answer 1

剑道菜单无法直接执行此操作，但您可以使用数据源的更改方法并从此函数创建菜单，试试这个：

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

注意：这是一个草稿，创建另一个函数来迭代 sub > sub > sub items。

Answer 2

Kendo UI 菜单暂时不支持绑定到远程数据源。

Answer 3

您应该以 json 友好格式为菜单返回结果。尝试这个：

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