kendo viewmodelを使用してwebapiにリモートでバインドする方法

Question

WebAPIから取得したデータをバインドするKendoUIグリッドがあります 結果を剣道グリッドにバインドしようとしています。

/* 
    */ 
    var viewModel = kendo.observable({ 
     transport: { 
    read: { 
     url: 'http://199.63.72.194/FusionAPI/api/Site/GetSiteDetails?siteId=64909fee-e52e-4051-8277-8ba2101e743b', 
     dataType: "json", 
     contentType: 'application/json; charset=utf-8', 
     type: "GET", 
    } 
      schema: { 
       model: { 
        fields: { 
         sitename: { 
          type: "string" 
         }, 
         address: { 
          type: "string" 
         }, 
         contact: { 
          type: "string" 
         }, 
         status: { 
          type: "string" 
         } 
        } 
       }, 
       data: "siteMaster", 
      } 
     }), 
    }); 

    $("#grid").kendoGrid({ 
     dataSource: viewModel.dtSource, 
     height: 250, 
     columns: [ 
      { 
       field: "sitename", 
       title: "Site Name" 
      }, { 
       field: "address", 
       title: "Address" 
      }, { 
       field: "contact", 
       title: "Contact" 
      }, { 
       field: "status", 
       title: "Status" 
      } 
     ], 
     pageable: true, 
     sortable:true 
}); 

以下のように私はポストマンからの応答を得るが、私はグリッドに

それを結合することができていないよしかし

<div class="grid"></div> 

剣道の基礎となるの.jsコードがあります私が間違っていると私は何が足りないのですか

Answer 1

データソースの構文が正しくありません。

Here is a link to the kendo documentation for a remote datasource using MVVM.

Here is a link to a grid example.

基本的には、あなたの構文は次のようになります。

var viewModel = kendo.observable({ 
    products: new kendo.data.DataSource({ 
     transport: {.... 

また、あなたのグリッドはデータバインド属性を指定する必要があります。たとえば、次のように

<div data-role="grid" 
    data-editable="true" 
    data-toolbar="['create', 'save']" 
    data-columns="[ 
      { 'field': 'ProductName', 'width': 270 }, 
      { 'field': 'UnitPrice' }, 
      ]" 
    data-bind="source: products, 
     visible: isVisible, 
     events: { 
      save: onSave 
     }" 
    style="height: 200px"></div>