Angular 2 grid select row programmatically

11 posts, 1 answers
  1. vladan strigo
    vladan strigo avatar
    23 posts
    Member since:
    Apr 2005

    Posted 26 Jan 2017 Link to this post

    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

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1285 posts

    Posted 27 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tim
    Tim avatar
    25 posts
    Member since:
    Jan 2009

    Posted 20 Sep 2017 in reply to Dimiter Topalov Link to this post

    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

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1285 posts

    Posted 21 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. François
    François avatar
    8 posts
    Member since:
    Sep 2017

    Posted 25 Oct 2017 in reply to Dimiter Topalov Link to this post

    The doc doesn't cover how to select/unselect a row programatically.
  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1285 posts

    Posted 25 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. François
    François avatar
    8 posts
    Member since:
    Sep 2017

    Posted 25 Oct 2017 in reply to Dimiter Topalov Link to this post

    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'.

  8. François
    François avatar
    8 posts
    Member since:
    Sep 2017

    Posted 25 Oct 2017 in reply to François Link to this post

    ok, I figured out that selectedKeys couldn't be used without kendoGridSelectBy.
  9. Dinko
    Dinko avatar
    6 posts
    Member since:
    Jan 2017

    Posted 25 Oct 2017 Link to this post

    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.

  10. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1285 posts

    Posted 26 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. bhavin
    bhavin avatar
    23 posts
    Member since:
    Aug 2018

    Posted 20 Sep 2018 Link to this post

    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);

     

     

     

Back to Top