Update kendo angular grid selected rows by (selectionChange) using custom service

I have a kendo-grid with a (selectionChange) attribute where I get my selection using a custom selectionService.ts:

(selectionChange)="selectionService.onSelectionChange($event)"


My selectionService is custom as I have different functionality based on if one item [1] or exactly two [1,2] is selected. If a 3rd row is selected, the third row should shift out the first, so the row would be [2,3]. My code here:

public onSelectionChange(event: SelectionEvent): void {
if (this.selectedItems!.length + event.selectedRows!.length > 2) {
this.selectedItems.shift();
}

for (let row of event.selectedRows!) {
this.selectedItems!.push(row.dataItem);
}

this.selectedItems = this.selectedItems!.filter(
item => !event.deselectedRows!.some(row => row.dataItem === item)
);
}


My problem is my selection works, but visually kendo still keeps the previously selected rows still selected as well. How do I make it so if a 3rd item is selected, the grid also deselects this item?

Continue reading...