javascript - KendoUI: one multi-level JSON dataSource for multiple grids -

i have json datasource looks this:

var productdatasource = new kendo.data.datasource({     transport: {         read: {             url: 'http://...',             datatype: "json"         }     },     pagesize: 10 }); 

and returns this:

{    "prodset1":[       {          "name": "product 1-1",          "price": 20,          "quantity": 50,          "change": 4       },       {          "name": "product 1-2",          "price": 14,          "quantity": 74,          "change": 5       }    ],    "prodset2":[       {          "name": "product 2-1",          "price": 15,          "quantity": 12,          "change": 2       }    ] } 

then have multiple grids use 1 datasource:

$("#prodset1").kendogrid({     datasource: productdatasource,     columns: [         { field: "prodset1[0].name", title: "name" },         { field: "prodset1[0].price", title: "price" },         { field: "prodset1[0].quantity", title: "quantity" },         { field: "prodset1[0].change", title: "change" }     ] });  $("#prodset2").kendogrid({     datasource: productdatasource,     columns: [         { field: "prodset2[0].name", title: "name" },         { field: "prodset2[0].price", title: "price" },         { field: "prodset2[0].quantity", title: "quantity" },         { field: "prodset2[0].change", title: "change" }     ] }); 

but doing { field: "prodset1[0].name" ...} isn't working.

how can reference correct product data?

since collections named in return object, can set schema.data property each prodset, , bind grid it.

i manually fetch data datasource, datasource.read()

var datafromservice = productdatasource.read(); 

documentation... http://docs.telerik.com/kendo-ui/documentation/api/framework/datasource#methods-read

then bind each grid datafromservice, each specifying collection inside json object 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 bound same set of data, displaying different collections json data.

see sample... http://jsbin.com/dokub/1/edit

if needing full crud operations, gets bag of cats.