Since the collections are named in the return object, you can set the schema.data property to each ProdSet, and bind a grid to it.
I would manually fetch the data from the datasource, with a datasource.read()
var datafromService = productDataSource.read();
Documentation... http://docs.telerik.com/kendo-ui/documentation/api/framework/datasource#methods-read
Then bind each grid to that datafromService, with each specifying the collection inside the JSON object to bind to.
$("#prodSet1").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet1'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
and
$("#prodSet2").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet2'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
Now they will be bound to the same set of data, just displaying different collections from the JSON data.
See sample... http://jsbin.com/dokub/1/edit
If you are needing full CRUD operations, that gets into another bag of cats.