kendo viewmodel kullanarak bir webapi'ye nasıl bağlanılır

Question

Bir WebAPI 'dan alınan verileri bağlayacağım bir KendoUI ızgaram var. Sonucu bir kendo ızgarasına bağlamaya çalışıyorum.

Kendo için temel .js kod ben Postman dan yanıt almak Ancak

/* 
    */ 
    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 
}); 

aşağıda gösterildiği gibi, ama kılavuza bağlamak mümkün değilim

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

Nerede yanlış gidiyorum ve şu anda eksik olduğum şey nedir?

Answer 1

Veri kaynağı için sözdizimi yanlış.

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

Here is a link to a grid example.

Temelde, Sözdiziminizin olmalıdır:

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

Ayrıca, ızgara veri bağlama özelliklerini belirtmek gerekiyor. Örneğin:

<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>