Angular 2 grid select row programmatically

[vladan strigo]

Hi everyone

 

I'm using Angular 2 kendo grid component and want to select/unselect grid row programmatically, from the code.

Is there any solution for this issue?

 

Thanks

Vladan

[Dimiter Topalov]

Hello Vladan,

Unfortunately selecting/deselecting a Grid row programmatically is currently not supported, or provided as a functionality. Please submit a feature request to our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-2-feedback

The Kendo UI Components for Angular are work in progress, and the Grid is the widget that we are currently focused on, so you can expect many enhancements in our future releases.

Meanwhile, you can track the progress in our dedicated site, and the GitHub repository issues:

http://www.telerik.com/kendo-angular-ui/

https://github.com/telerik/kendo-angular

Regards,
Dimiter Topalov
Telerik by Progress

[Tim]

Hi Dimiter,

Has this been implemented yet or is it in the process of possibly being completed in the next few months?

If not, is there a way that the grid can be refreshed back to a n unselected state?

Tim

[Dimiter Topalov]

Hello Tim,

The new enhanced selection functionality is now released. The respective documentation and examples, covering all new features, is available here:

http://www.telerik.com/kendo-angular-ui/components/grid/selection/

Regards,
Dimiter Topalov
Progress Telerik

[François]

The doc doesn't cover how to select/unselect a row programatically.

[Dimiter Topalov]

Hi,

You can change the selection programmatically by manipulating the array the currently selected items are stored in:

https://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-persisting-the-selection

https://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-setting-the-selected-rows

Here is a runnable example demonstrating both configuring preselected items, and selecting/deselecting an item programmatically:

http://plnkr.co/edit/hMBKyv1Q8IRZ6y0r2jsx?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[François]

Yes that's what I figured out also strangely I got this error at the moment:

Can't bind to 'selectedKeys' since it isn't a known property of 'kendo-grid'.

[François]

ok, I figured out that selectedKeys couldn't be used without kendoGridSelectBy.

[Dinko]

Hi,

I am having trouble in the following case:

Open the plnkr and select(click on the line not the checkbox) a line. Select the same line two more times. This means you will select the same line a total of three times.
http://plnkr.co/edit/488xAZGdgsPQ6p63BvrT?p=preview

You get this error:

zone.js:195 Uncaught TypeError: Cannot read property 'ProductID' of undefined
    at t.e.getItemKey (VM18634 kendo-angular-grid.js:3)
    at eval (VM18634 kendo-angular-grid.js:3)
    at Array.forEach (<anonymous>)
    at t.e.onSelectionChange (VM18634 kendo-angular-grid.js:3)
    at b.schedulerFn [as _next] (VM18625 core.umd.js:3679)
    at b.__tryOrUnsub (VM18626 Rx.system.min.js:7)
    at b.next (VM18626 Rx.system.min.js:7)
    at b._next (VM18626 Rx.system.min.js:7)
    at b.next (VM18626 Rx.system.min.js:7)
    at EventEmitter.b.next (VM18626 Rx.system.min.js:7)

The bug occur when you add "changeDetection: ChangeDetectionStrategy.OnPush,"

The actual problem comes from "this.currentSelection[item.index] = item.data;" line 74 in the selection.service.js.

[Dimiter Topalov]

Hi Dinko,

Thank you for bringing this issue to our attention. I logged it in our public GitHub repository and you can track it here:

https://github.com/telerik/kendo-angular/issues/1040

We will try to provide a fix as soon as possible in an upcoming Grid package release.

I am sorry for any inconvenience caused, and I also updated your Telerik points for reporting this bug.

Regards,
Dimiter Topalov
Progress Telerik

[bhavin]

Hi, I am trying to achieve something similar in Kendo Angular2 grid, I have a set of checkboxes if I select them it should fetch me back the values for checked ones on a button click.  
I could figure it for selecting all of them using something like 

this.mySelection = this.allChecked ? this.orgContacts.map(pr => pr.OrgID):[];

Or I was able to select a single one using 

this.rowsSelected = this.orgContacts.map(o => o.OrgID);