Set initial selected rows in Angular Kendo UI grid with rowSelected

Question

I have a Kendo UI Grid where you are able to select individual rows by clicking a checkbox which adds them to an array; however, I am wanting to initially set selected rows based on whether or not the dataItem for each row is in a specified array called selectedAccounts .

I have tried using [rowSelected]="isRowSelected" , but using this method would not allow me to check/uncheck the selection checkbox.

I need to be able to set the selected condition initially and change the selection if needed. It's also worth noting that I do not have an issue when I start with nothing in selectedAccounts .

Here is a stackblitz for reference.

Answer 1

It turns out that I had everything set up correctly, but I was wrong with the way I was using isRowSelected in the typescript file. I originally had:

public isRowSelected = (e: RowArgs) => this.selectedAccounts.indexOf(e.dataItem) >= 0;}

The above code would always return false while still showing selectedAccounts correctly.

After making the changes below, selectedAccounts could be read properly and allowed me to toggle the checkboxes as needed while updating the selectedAccounts array and without causing any additional problems.

public isRowSelected = (e: RowArgs) => { 
  return this.selectedAccounts.find(f => e.dataItem.accountId === f.accountId) ? true : false;
}

I hope this answer is helpful for others. I have updated the stackblitz to reflect the correct code.