Question

我有一个KendoUI网格，我正在绑定从WebAPI检索的数据我正在尝试将结果绑定到kendo网格。

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

Kendo的基础.js代码如下所示

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

但是我得到了Postman的回复，但我无法将其绑定到网格

我哪里出错了，我错过了什么

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>

如何使用kendo viewmodel远程绑定到webapi

1 个答案: