数据绑定 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

我尝试了来自这里的建议/p>

I have tried suggestion from here

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

但这只会扩展第一行.

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

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屋！