如何在这个 MVC SPA 中将 kendo ui 网格绑定到它的数据源？答案

【问题标题】：How can I bind kendo ui grid to its datasource in a this MVC SPA?如何在这个 MVC SPA 中将 kendo ui 网格绑定到它的数据源？
【发布时间】：2015-10-24 09:59:35
【问题描述】：

使用以下来源作为模板：https://github.com/Simba-Mupfunya/Kendo-UI-SPA-Template-vs2013-MVC5

我正在尝试将其他 Kendo UI 控件（如网格和调度程序）绑定到 javascript“代码隐藏”中的模型。我尝试过的...

HTML：

<div data-role="grid"
    date-scrollable="true"
    data-editable="true"
    data-toolbar="['create', 'save']"
    data-columns="[
        { 'field': 'Name', 'width': 50 }
        , { 'field': 'Phone' }
        , { 'field': 'Email' }
    ]"
    data-bind="source: contacts,
    visible: isVisible,
    events: {
        save: onSave
        }"
    style="height: 200px">
</div>

js:

define([
'text!views/contacts/contacts.html'
], function (html) {

var contactDataSource = new kendo.data.DataSource({
    data: [
        { Name: "Jim Dandy", Phone: "555-1234", Email: "jim.dandy@gmail.com" }
        , { Name: "Joe Coffee", Phone: "555-1234", Email: "joe.coffee@gmail.com" }
        , { Name: "Ham Son", Phone: "555-1234", Email: "ham.son@gmail.com" }
        , { Name: "Dan Fooey", Phone: "555-1234", Email: "dan.foo@gmail.com" }
    ],
    schema: {
        model: {
            fields: {
                Name: { type: "string" }
                , Phone: { type: "string" }
                , Email: { type: "string" }
            }
        }
    }
});

//contactDataSource.read();

var viewModel = kendo.observable({
    title: 'Contacts'
    , contacts: contactDataSource
});

kendo.bind(html, viewModel);

var view = new kendo.View(html, {
    model: viewModel,
    show: function (e) {
        kendo.fx(this.element).fade('in').duration(500).play();
    }
});

return view;

});

【问题讨论】：

我不熟悉 Kendo 的视图实现，但您是否尝试将 kendo.bind() 移动到视图的 show() 函数中？在我看来，您在呈现任何内容之前正在运行 bind 方法。

标签： mvvm kendo-ui single-page-application

【解决方案1】：

这并不能解决您的具体问题，但是在您的“真实”实施中，我认为您需要从真实数据源获取数据？在这种情况下，您可能希望数据通过 MVC 或 Web Api 控制器来。为此，您需要在数据源中手动配置 AJAX 调用。看到这个（你需要使用'transport'对象的'read'属性，它会自动使用AJAX来进行调用）

http://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#creating-a-datasource-for-remote-data

【讨论】：