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

Question

Can anyone give an example of JSON data that is returned from a service and consumed by a Kendo Grid (pure JavaScript)? There isn't a lot of information on serverGrouping using their pure Javascript UI controls...so I am wondering if anyone has gotten this to work.

Answer 1

Your service could return json like this (you could of course include columns, data types, etc.):

{  
  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,}
  ]
};     

Then your grid definition would use the groupBy in the datasource:

$("#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