Question

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

我的问题可以通过给出jsfiddle代码

执行几个简单的步骤来重现

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

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

此处的jsfiddle repro link也在此处作为内联代码段提供...

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

Answer 1

我刚收到Telerik客户支持部门提供的工作决议提示答案

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

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

1 个答案: