kendo UI DataSource和複雜的JSON

Question

我想用webservice返回的複雜json填充網格。 我的JSON包含兩件事情：

• 數據：陣列的記錄，這將填補電網
• 列：陣列與電網

的配置（佈局）我已經成功地填補了通過指定schema.data與「數據」網格。

我的問題是，我如何從數據源中獲取「列」（來自JSON），以便我可以在我的gridOptions中設置網格屬性。 有沒有辦法做到這一點？

這裏是我的JSON

{ 
    "data": [ 
    { 
     "id": 0, 
     "firstname": "Dalton", 
     "lastname": "Holden", 
     "gender": "male", 
     "email": "daltonholden@tellifly.com", 
     "phone": "871-407-2973", 
     "address": "22 National Drive, Brenton, Louisiana", 
     "birthday": "21/04/1965", 
     "currency": "GBP" 
    }, 
    { 
     "id": 1, 
     "firstname": "Allyson", 
     "lastname": "Odom", 
     "gender": "female", 
     "email": "allysonodom@tellifly.com", 
     "phone": "922-548-2725", 
     "address": "44 Quincy Street, Thynedale, Georgia", 
     "birthday": "28/08/1961", 
     "currency": "CHF" 
    }, 
    { 
     "id": 2, 
     "firstname": "Sweet", 
     "lastname": "Branch", 
     "gender": "male", 
     "email": "sweetbranch@tellifly.com", 
     "phone": "880-593-2244", 
     "address": "81 Fenimore Street, Veguita, Missouri", 
     "birthday": "08/08/1953", 
     "currency": "AUD" 
    } 
    ], 

    "columns": [ 
    { 
     "field": "firstname", 
     "title": "Frist Name", 
     "width": 200, 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "lastname", 
     "title": "Last Name", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "gender", 
     "title": "Gender", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "email", 
     "title": "e-mail", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "phone", 
     "title": "Phone Number", 
     "attributes": { 
     "class": "", 
     "style": "text-align: right;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: right;" 
     } 
    }, 
    { 
     "field": "address", 
     "title": "Address", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "birthday", 
     "title": "Birthday", 
     "attributes": { 
     "class": "", 
     "style": "text-align: center;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: center;" 
     } 
    }, 
    { 
     "field": "currency", 
     "title": "Currency", 
     "attributes": { 
     "class": "", 
     "style": "text-align: center;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: center;" 
     } 
    } 
    ] 
} 

這裏是我的代碼：

var customersSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "http://....", 
       dataType: "json" 
      } 
     }, 
     schema: { 
      data: "data" 
     } 
    }); 

$scope.mainGridOptions = { 
     dataSource: customersSource, 
     //columns: Here it should be something like --> customersSource.columns, 
     height: 500, 
     scrollable: true, 
     selectable: true 
    }; 

Answer 1

架構只會照顧獲取和分析你的數據源，以便需要的數據的創建視圖，過濾，排序等。

沒有內置的手靈活的「混合」內容來自一個Ajax請求。

儘管如此，您仍然可以制定解決方法。使用requestEnd事件，訪問缺失的數據，並保存以備後用。

var customersSource = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: "http://....", 
      dataType: "json" 
     } 
    }, 
    schema: { 
     data: "data" 
    }, 
    requestEnd: function(e) { 
     // According to the documentation, this gives you a reference to the datasource instance itself. 
     this.whatever = e.response.columns; 
    } 
}); 

現在你可以在以後使用這個東西。

$scope.mainGridOptions = { 
    dataSource: customersSource, 
    columns: customersSource.whatever, 
    height: 500, 
    scrollable: true, 
    selectable: true 
};