数据绑定Kendo UI网格后保留展开的行 [英] Retain expanded rows after databinding Kendo UI grid

问题描述

这是我第一次使用Kendo UI.我有一个带有子节点的Kendo UI网格.我想在数据绑定后保留展开的行.现在，在子级中添加一行后，它变得崩溃了

This is my first time working with Kendo UI. I have a Kendo UI grid with child nodes. I want to retain the expanded rows after databinding. Right now its getting collapsed after a row is added in the child

我尝试了来自此处的建议

I have tried suggestion from here

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

但这只会扩展第一行.

But this expands the first row only.

如何保留行?我想念什么?

How to retain rows? What am I missing?

Codepen

推荐答案

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

After a lot of playing around with your code example in CodePen, I believe I've come up with an elegant solution that works.

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

Having worked with Kendo UI for over three years, I've become pretty familiar with some of its inner workings. As such, I'm going to take advantage of one of these - the data-uid attribute. Kendo UI puts these on all <tr> elements in its grid. I chose this attribute because I know that when we call grid.expandRow() we're going to need to fashion a valid jQuery selector to pass in as a parameter. This eliminates the need for us to add our own attributes or classes and the code to handle them.

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

First, we need to define a variable to hold our row reference. We'll call it expandedRowUid. To set its value, we hook into the detailExpand event of the grid. So, when the user expands a row, we store its data-uid number.

var expandedRowUid;

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

然后，每当进行更改以使主网格重新绑定到其数据时，我们都将挂接到网格的dataBound事件中，并重新展开具有data-uid等于该行的行存储在expandedRowUid中.

Then, whenever a change is made that causes the master grid to re-bind to its data, we hook into the dataBound event of the grid and re-expand the row that has a data-uid equal to the one stored in expandedRowUid.

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

此处 >是有效的CodePen示例.

Here is the working CodePen example.

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

NOTE: This will only re-expand the last row that was expanded before the data bind is triggered. So, if you expand rows 4, 5, and 2 in that order, and then trigger a data bind, only row 2 will be re-expanded. You can obviously extend this functionality to handle use cases like that though.

这篇关于数据绑定Kendo UI网格后保留展开的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！