数据绑定 Kendo UI 网格后保留展开的行

这是我第一次使用 Kendo UI。我有一个带有子节点的 Kendo UI 网格。我想在数据绑定后保留扩展的行。现在，在子项中添加一行后，它会折叠起来

我尝试过来自的建议here https://stackoverflow.com/questions/12095392/remember-expanded-detail-grids-on-refresh-in-kendo-ui

dataBound: function() {
    this.expandRow(this.tbody.find("tr.k-master-row").first());
}

但这仅扩展了第一行。

如何保留行？我缺少什么？

Codepen http://codepen.io/anon/pen/otqdw

在对 CodePen 中的代码示例进行了大量研究之后，我相信我已经想出了一个有效的优雅解决方案。

使用 Kendo UI 已经三年多了，我已经非常熟悉它的一些内部工作原理。因此，我将利用其中之一 -data-uid属性。 Kendo UI 将这些放在所有内容上<tr>其网格中的元素。我选择这个属性是因为我知道当我们调用grid.expandRow()我们需要创建一个有效的 jQuery 选择器作为参数传递。这消除了我们添加自己的属性或类以及处理它们的代码的需要。

首先，我们需要定义一个变量来保存行引用。我们将称之为expandedRowUid。为了设置它的值，我们挂接到detailExpand网格事件。因此，当用户展开一行时，我们存储它的data-uid number.

var expandedRowUid;

var grid = $('#grid').kendoGird({
  // ...
  detailExpand: function(e) {
    expandedRowUid = e.masterRow.data('uid');
  }
});

然后，每当发生导致主网格重新绑定到其数据的更改时，我们都会挂接到dataBound网格的事件并重新展开具有data-uid等于存储在expandedRowUid.

var grid = $('#grid').kendoGird({
  // ...
  detailExpand: function(e) {
    expandedRowUid = e.masterRow.data('uid');
  },
  dataBound: function() {
    this.expandRow($('tr[data-uid=' + expandedRowUid + ']'));
  }
});

Here http://codepen.io/anon/pen/IvsAF?editors=101是 CodePen 的工作示例。

NOTE：这只会重新展开已展开的最后一行before数据绑定被触发。因此，如果您按顺序展开第 4、5 和 2 行，然后触发数据绑定，则只有第 2 行将被重新展开。显然，您可以扩展此功能来处理类似的用例。