如何使 KendoUI grid.setOptions 与 MVVM 一起使用？答案

【问题标题】：How to make KendoUI grid.setOptions working with MVVM?如何使 KendoUI grid.setOptions 与 MVVM 一起使用？
【发布时间】：2014-12-28 01:31:34
【问题描述】：

在最新版本中，剑道引入了 saving grid state and layout 的功能，我无法使用 javascript MVVM 声明的网格。

我的问题可以通过使用下面给出的 jsfiddle 代码执行几个简单的步骤来重现

调整列大小
保存状态
将列移动到其他宽度
加载状态

我期望的结果是，在第 4 步之后，列宽将重置为已保存状态。我在我的重现中看到的是 grid.setOptions 只是将网格重置为初始未修改状态。

这里的jsfiddle repro link 也作为内联代码 sn-p 在这里...

 $(document).ready(function () {
   var dataSource = new kendo.data.DataSource({
    data: [
      {name: 'John', surname: 'Smith'},
      {name: 'John', surname: 'Doe'}
    ]
  });

    var dataContext = new kendo.data.ObservableObject({
      dataSource: self.remoteDataSource
    });

    var viewTemplate = 
        "<div id='grid' data-role='grid' data-sortable='true' data-editable='true' " +
        "data-resizable='true' data-reorderable='true' data-navigatable='true' " + 
        "data-columns=\"[{'field':'name', 'title':'Name'}, {'field': 'surname', 'title': 'Surname'}]\"" + 
        " data-bind='source: dataSource' />";


    // now get the main view
    var kendoView = new kendo.View(viewTemplate, {
      wrap: false,
      model: dataContext
    });

    kendoView.render($("body"));

     var grid = $("#grid").data("kendoGrid");

    $("#save").click(function (e) {
        e.preventDefault();
        var options = grid.getOptions();
        console.log(options);
        localStorage["kendo-grid-options"] = kendo.stringify(options);
    });

    $("#load").click(function (e) {
        e.preventDefault();
        var optionsString = localStorage["kendo-grid-options"];
        if (optionsString) {
            var options= JSON.parse(optionsString);
            console.log(options);
            grid.setOptions(options);
        }
    });

 });

<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.metro.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<body>
    <div class="box">
        <a href="#" class="k-button" id="save">Save State</a>
        <a href="#" class="k-button" id="load">Load State</a>
    </div>
</body>

【问题讨论】：

标签： mvvm kendo-ui kendo-grid

【解决方案1】：

我刚刚收到 Telerik 客户支持的答复，其中包含有效的解决方法提示

这种奇怪的行为来自这样一个事实，即首先通过数据属性提供选项，然后通过 JavaScript 传递 Grid 新选项的 setOptions 方法，但是数据属性选项仍然在元素上并且它们是此时仍然认为选项具有更高的优先级。作为临时解决方法，您可以删除提供列选项的数据属性，然后应用新选项。

【讨论】：