Kendo UI 当 ordering/filtering 时网格选择不正确

Question

我在 Angular 中使用 kendo ui 网格，其中 html:

<kendo-grid 
[kendoGridBinding]="absortCommunicationOverview" 
[height]="510"
[pageSize]="10"
[pageable]="true" 
[sortable]="true" 
[filterable]="true" 
[selectable]="selectableSettings" 
kendoGridSelectBy 
[selectedKeys]="selectedKeys"
[rowClass]="rowCallback"
>

<kendo-grid-checkbox-column width="40">
</kendo-grid-checkbox-column>

<kendo-grid-column field="jobInfo.jobName" title="Job Name">
</kendo-grid-column>

<kendo-grid-column field="jobInfo.jobDisplayName" title="Job Display Name">
</kendo-grid-column>

<kendo-grid-column field="midFileReference" title="MID File Reference">
</kendo-grid-column>

<kendo-grid-column field="nrItemsInMID" title="Nr Items in MID">
</kendo-grid-column>

<kendo-grid-column field="jobManagerStatus" title="status">
</kendo-grid-column>

<kendo-grid-column field="expiryTimestamp" title="Expiry Timestamp" filter="date" format="{0: dd-MM-yyyy HH:mm}">
</kendo-grid-column>

<ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex">
    <app-ab-status-tasks-grid [tasks]="dataItem.tasks"></app-ab-status-tasks-grid>
</ng-template>

网格绑定到对象数组

public absortCommunicationOverview: ABSortCommunictationOverview[] = []

我可以使用以下 selectableSettings select 行：

  public selectableSettings: SelectableSettings = {
    enabled : true,
    checkboxOnly: false
  };

还有一个包含 selected 项的变量

public selectedKeys: [] = [];

稍后我将使用 selectKeys 数组对 selected 行执行操作。

  public OpenDialogOverride(){

    var jobDisplayNames:string = ''
    this.selectedKeys.forEach(key=>{
      jobDisplayNames += this.absortCommunicationOverview[key].jobInfo.jobDisplayName + ', '
    })
    jobDisplayNames = jobDisplayNames.slice(0, -2)
    
    this.dialogStartOverrideOpened = true;
  }

但是，我注意到以下行为：

例如，如果我有 2 行，并且我单击排序或使用过滤器，selected 项目的索引是错误的。

所以在无序网格中，如果我 select 第二行，selectedKeys 包含 2，这是正确的。但是，如果我对列进行排序以便该行现在位于顶部，则 selected 索引为 1，这对于数据数组中的元素而言是不正确的。

我还注意到，如果我 select 一行，然后对网格进行排序，selection 会更改为另一行。

感谢您的任何见解！

Answer 1

原来我应该更仔细地查看文档。

不带参数的 kendoGridSelectBy 指令使用行索引作为选择键。

这会在 filtering/ordering 时导致问题。

解决方案是将 kendoGridSelectBy 设置为数据字段。

以我为例：

kendoGridSelectBy="flowId"

然后可以使用过滤器从数据数组中解析出正确的项目。

this.selectedKeys.forEach(key=>{
    var selectedFlow = this.absortCommunicationOverview.filter(a=>a.flowId == key)[0];
    //...
  })

Kendo UI 当 ordering/filtering 时网格选择不正确

Kendo UI grid selection incorrect when ordering/filtering

kendo-ui

kendo-grid

angular