Kendo UI网格 - 从api返回动态列定义和数据源(web api)

时间:2017-03-14 18:19:58

标签: kendo-ui kendo-grid

我正在使用kendo ui网格(使用jquery)。我的要求是我有一个网格,我需要根据UI中的特定事件更改使用模型驱动方法来适应动态列定义和数据。在这种情况下,我如何容纳自定义编辑器(下拉菜单,多选)。以下示例代码。

public class NameModel
{

    [ColumnAttributes(Title = "FirstName", Width = "50px", field = "FirstName")]
    public string FirstName { get; set; }
    [ColumnAttributes(Title = "LastName", Width = "50px", field = "LastName")]
    public string LastName { get; set; }
}

public class ColumnAttributes : Attribute
{
    public string Title { get; set; }
    public string Width { get; set; }
    public string field { get; set; }
    public string editor { get; set; }
    public bool editable { get; set; }
}

// Main class used to return the grid data and columns based on the type

public class CustomModelWrapper<T>
    {
        public string GridType { get; set; }

        public List<T> GridData { get; set; }

        public List<ColumnAttributes> ColumnHeaders { get; set; }
    }



// Jquery code to bind the 
 $("#grid").removeData('kendoGrid');
        $("#grid").empty();
        var grid = $("#grid").kendoGrid({
            dataSource: data[0].GridData ,
            height: 500,
            columns: data[0].ColumnHeaders,
            editable: true,
        }).data("kendoGrid");

1 个答案:

答案 0 :(得分:0)

这个jsbin似乎有kendo网格的答案。我也有这方面的要求,希望这个答案能找到你!

     var grid = $("#grid").kendoGrid({
    dataSource: {
      data: gridData,
      schema: {
        model: model,
        parse: parseFunction
      }
    },
    editable: true,
    sortable: true
  });

请参阅链接 - http://jsbin.com/viqaxoxi/1/edit?html,js,output