订购/过滤时 Kendo UI 网格选择不正确答案

【问题标题】：Kendo UI grid selection incorrect when ordering/filtering订购/过滤时 Kendo UI 网格选择不正确
【发布时间】：2020-11-24 12:58:30
【问题描述】：

我在 Angular 中使用带有以下 html 的剑道 ui 网格：

<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 选择行：

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

还有一个保存所选项目的变量

public selectedKeys: [] = [];

稍后我将使用 selectKeys 数组对选定的行执行操作。

  public OpenDialogOverride(){

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

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

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

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

我还注意到，如果我选择一行，然后对网格进行排序，则选择会更改为不同的行。

感谢您的任何见解！

【问题讨论】：

标签： angular kendo-ui kendo-grid

【解决方案1】：

事实证明我应该更仔细地查看文档。

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

这会导致过滤/排序时出现问题。

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

就我而言：

kendoGridSelectBy="flowId"

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

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

【讨论】：