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

[Bart]

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?

Stackblitz example:

https://stackblitz.com/edit/angular-pe3m9kdq-6wwuibrm

[Yanmario]

Hi Bart,

I remember answering your question on StackOverflow, and I'm sharing the content here for others who might find it useful.

For your use case, you need row selection persistence. The updated example below demonstrates the expected behavior:

https://stackblitz.com/edit/angular-pe3m9kdq-i1qt5ben?file=src%2Fapp%2Fapp.component.ts

Regards,
Yanmario
Progress Telerik