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事件并重新展开具有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

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

＆＃13;

 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());
      
    }
}

＆＃13;

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

3 个答案: