Kendo UI網格服務器端分組（無MVC）

Question

誰能舉例說明從服務返回並由Kendo Grid（純JavaScript）使用的JSON數據嗎？ 使用純Javascript UI控件的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