Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
How to programmatically select a row in igx-grid?
posted

For newer versions of Angular, is there a way to programmatically select a row (either by index or primaryKey)?

I have found several older examples posted to Stackblitz from this forum, but they do not work anymore, and there have been a lot of changes in . The most current is Angular 8 (for future readers, Angular 17 is currently supported).

I am validating features as we consider switching to this grid library, currently in Angular 14: This particular use case is programmatically selecting a row, if it exists (based on the primary key), and then scrolling to the latest row with that primary key, on a refresh of [data].

This works for programmatically scrolling to the row:

this.grid.navigateTo(550, 1);

But all I need help with is selecting the row. Thanks!

Parents
  • 2680
    Verified Answer
    Offline posted

    Hello Shannon,

    Sure, rows can be programmatically selected by leveraging the selectedRows setter exposed by the IgxGrid’s API. It works by assigning it an array of the IDs (the primary keys) of the rows to be selected, for example:

    <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>

    The above referenced link targets the latest version of Ignite UI for Angular – 17.0.8.

    To view the API for earlier versions, please select a version number from the gray dropdown in the upper left corner of the black navbar above the API pages:

    Additionally, there is the selectRows method, which achieves the same.

    There is also a section about programmatically selecting rows in the Grid Selection topic of our documentation. Please, check it out as well and let me know if you need any further information.

    Finally, please, note that version 14 of Angular and Ignite UI for Angular is no longer supported. The currently supported versions are 16.1.x and 17.0.x. We strongly suggest considering upgrading your app to any of the supported Angular and Ignite UI for Angular versions in order to take advantage of all introduced features and enhancements in the most recent releases, as well as active support.

    More about our versioning and support schedule can be found in this Wiki page of the igniteui-angular repo.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer

Reply Children