kendo-ui - 数据绑定(bind) Kendo UI 网格后保留展开的行

Question

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

我尝试过 here 的建议

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

但这仅扩展了第一行。

如何保留行？我错过了什么？

Codepen

Answer 1

在 CodePen 中多次尝试您的代码示例后，我相信我已经想出了一个有效的优雅解决方案。

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

首先，我们需要定义一个变量来保存行引用。我们将其称为 expandedRowUid 。要设置其值，我们 Hook detailExpand网格事件。因此，当用户展开一行时，我们存储其 data-uid数量。

var expandedRowUid;

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

然后，每当发生导致主网格重新绑定(bind)到其数据的更改时，我们都会挂接到 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 是正在运行的 CodePen 示例。

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