Search code examples
kendo-ui-angular2

Kendo UI For Angular2 - Grid Row Select

I have a working <kendo-grid> component with 10 visible rows over a data set of 34 rows (approx 4 pages). Sorting and selecting is working as expected.

<kendo-grid [data]="gridView" 
                    [pageSize]="pageSize" 
                    [skip]="skip" 
                    [pageable]="true" 
                    [height]="300" 
                    (pageChange)="pageChange($event)"
                    [sortable]="{ mode: 'single' }" 
                    [sort]="sort" 
                    [selectable]="true" 
                    (sortChange)="sortChange($event)" 
                    (selectionChange)="selectionChange($event)">

Say I select second row. Then I sort the table and the selection stays on row two but of course it's highlighting a different record. It's always selecting the second row on the grid, which of course, it's what I want.

How do I clear the selected row in my (sortChange) event so at least the user isn't presented with a different selection that they one they already chose. I am open to some kind of data binding attribute for selected row that I could set to null or some property on gridView or even poking around inside @ViewChild .

Any help would be appreciated.

Normal Sort

Normal Sort

Ascending Sort

Ascending Sort

Descending Sort

Descending Sort

Solution

  • I had a similar question here: Select grid row item from code

    Basically, you also need to select the grid row item from code without user interaction and this is currently not supported in the current beta build of the Kendo UI Angular2 controls.