Kendo UI网格服务器端分组（无MVC）

Question

任何人都可以提供从服务返回并由Kendo网格（纯JavaScript）使用的JSON数据的示例吗？在使用纯Javascript脚本控制的serverGrouping上没有太多的信息.​​..所以我想知道是否有人已经得到这个工作。

Answer 1

您的服务可能会返回类似这样的JSON（当然，你可能包括列，数据类型等）：

{ 
    groupBy: "Discontinued", 
    rows: [ 
    {ProductName : "Chai",UnitPrice : 18.0000,UnitsInStock : 39,Discontinued : false,}, 
    {ProductName : "Chang",UnitPrice : 19.0000,UnitsInStock : 17,Discontinued : false,}, 
    {ProductName : "Aniseed Syrup",UnitPrice : 10.0000,UnitsInStock : 13,Discontinued : false,}, 
    {ProductName : "Chef Anton's Cajun Seasoning",UnitPrice : 22.0000,UnitsInStock : 53,Discontinued : false,}, 
    {ProductName : "Chef Anton's Gumbo Mix",UnitPrice : 21.3500,UnitsInStock : 0,Discontinued : true,}, 
    {ProductName : "Grandma's Boysenberry Spread",UnitPrice : 25.0000,UnitsInStock : 120,Discontinued : false,} 
    ] 
};  

然后网格定义将使用GROUPBY在数据源：

$("#grid").kendoGrid({ 
    dataSource: { 
     data: jsondata.rows, 
     schema: { 
      model: { 
       fields: { 
        ProductName: { type: "string" }, 
        UnitPrice: { type: "number" }, 
        UnitsInStock: { type: "number" }, 
        Discontinued: { type: "boolean" } 
       } 
      } 
     }, 
     group: { 
      field: jsondata.groupBy, 
      dir: "asc" 
     } 
    }, 
    groupable: true, 
    scrollable: true, 
    columns: [ 
     "ProductName", 
     { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, 
     { field: "UnitsInStock", title: "Units In Stock", width: "130px" }, 
     { field: "Discontinued", width: "130px" } 
    ] 
}); 

DEMO