Kendo UI grid selection incorrect when ordering/filtering

Question

I am using a kendo ui grid in Angular with the following 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>

The grid is bound to an array of objects

public absortCommunicationOverview: ABSortCommunictationOverview[] = []

I am able to select rows using the following selectableSettings :

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

And a variable that holds the selected items

public selectedKeys: [] = [];

I am using the selectKeys array later to perform an action on a selected row.

  public OpenDialogOverride(){

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

However, I noticed the following behavior:

If for example I have 2 rows, and I click the ordering or use the filter, the index of the selected item is wrong.

So in the unordered grid, if I select the second row, selectedKeys contains 2 which is correct. If however I order the column so that the row is now in the top the selected index is 1 which is incorrect in respect to the elements in the data array.

I also noticed if I select a row, and then order the grid, the selection changes to a different row.

Thanks for any insight!

bluedot bluedot · Accepted Answer · 2020-11-25T12:35:34

Turns out I should have looked more closely at the documentation.

The kendoGridSelectBy directive without parameters uses the row index as selection key.

This causes issues when filtering/ordering.

The solution is to set kendoGridSelectBy to a data-field.

In my case :

kendoGridSelectBy="flowId"

It is then possible to resolve the correct item from the data array by using a filter.

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

Kendo UI grid selection incorrect when ordering/filtering

1 Answers