javascript - KendoUI: 複数のグリッド用の 1 つのマルチレベル JSON データソース

Question

次のような JSON データソースがあります。

var productDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: 'http://...',
            dataType: "json"
        }
    },
    pageSize: 10
});

そして、次のようなものを返します:

{
   "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
      }
   ]
}

次に、この 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" }
    ]
});

しかし、やって{ field: "ProdSet1[0].Name" ...}もうまくいきません。

正しい製品データを参照するにはどうすればよいですか?