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

Question

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

我已经尝试过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。为了设置它的值，我们挂钩到网格的detailExpand 事件。因此，当用户展开一行时，我们存储其data-uid 编号。

var expandedRowUid;

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

然后，每当发生导致主网格重新绑定到其数据的更改时，我们都会连接到网格的 dataBound 事件并重新展开具有等于 1 的 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 的工作示例。

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

Answer 2

GridDetailExpand: function (e) {
   var gridId = e.sender.element[0].id;
   var grid = $("#" + gridId).data("kendoGrid");
   var data = grid.dataItem(e.masterRow);
   addToArray(expandedRows, data.UniqueIdOfYourDataInGrid);
  },
  GridDetailCollapse: function (e) {
   var gridId = e.sender.element[0].id;
   var grid = $("#" + gridId).data("kendoGrid");
   var data = grid.dataItem(e.masterRow);
   removeFromArray(expandedRows, data.UniqueIdOfYourDataInGrid);
  }

然后是数据绑定

var gridId = e.sender.element[0].id;
var grid = $("#" + gridId).data("kendoGrid");
$.each(grid.tbody.find('tr.k-master-row'), function () {
 var data = grid.dataItem(this);
 if (isInArray(expandedRows, data.UniqueIdOfYourDataInGrid)) {
   grid.expandRow(this);
 }
});

所需功能：

var expandedRows = [];

function addToArray(arr, value) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === value) return;
    }

    arr.push(value);
}

function removeFromArray(arr, value) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === value) {
            delete arr[i];
            return;
        }
    }
}

function isInArray(arr, value) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === value) return true;
    }

    return false;
}

希望这会有所帮助……我花了一段时间才弄清楚……

Answer 3

在子网格中添加的记录被刷新后保留父网格中最后一个扩展行的解决方案。

 detailInit: function (e) {
   
    //Get Parent Grid Last expanded Row index
    lastRowIndex = $(e.masterRow).index(".k-master-row");
   
 },
 dataBound: function () {
   
    //Check any parent grid row is expanded based on row index
    if (lastRowIndex != null && lastRowIndex != undefined){
      
      //find the Grid row details based on row index
      var row = $(this.tbody).find("tr.k-master-row:eq(" + lastRowIndex + ")");
      
      //If expand Row exists then it will expanded
      this.expandRow(row);
    }
    else {
      
      //None of the Parent Grid row is expanded then,default First row is expanded
      this.expandRow(this.tbody.find("tr.k-master-row").first());
      
    }
}