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.
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" }
]
});