I am trying to create a Kendo Grid with multiple select functionality and user to be able to select multiple rows via dragging a mouse click selection.

HTML:

<kendo-grid
 #idGrid
 [selectable]="selectableSettings” (selectionChange)="OnSelectionChanged($event)">

COMPONENT:

    public selectableSettings:  SelectableSettings;
    constructor(){
    this.setSelectableSettings();
    }

    public setSelectableSettings(): void {
    this.selectableSettings = { mode: "multiple", drag: true};
    }

    OnSelectionChange(e){
    for(let item of e.selectedRows){
    this.selectedRows.push(item.dataItem);
    }

    for(let item of e.deselectedRows){
    this.selectedRows = this.selectedRows.filter(x => x.Id === item.dataItem.Id);
    }
    }

Drag is working as expected and rows are getting selected with mouse drag, however the problem is new subsequent drag selection is OVERRIDING THE LAST SELECTION even if the user press SHIFT button