Kendo UI For Angular2 - Grid Row Select

Question

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

Ascending Sort

Descending Sort

Answer 1

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.

Answer 2

In my application, I resort to triggering a click event on the row I want to select. :/

I do this in a case where I have 'up' and 'down' buttons to rearrange the grid and want to maintain my selection when I switch items.

var grid = document.getElementById('myGrid');
var rows = grid.getElementsByTagName('tr');
rows[idx].click(); // add one to the desired row index to skip the header row

Here's a (sloppy, minimal) Plunkr of this scenario: http://plnkr.co/edit/09dlqdl0Xchoy0e5zKRq