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!
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 PachilovaAssociate Software Developer
Thanks, this works. I had found the documentation over Christmas break.
In our case we will only allow single row selection.
this.grid.selectedRows = [this.selectedRowIndex];
---
On a separate note, could you post the link for where the drop down menu allows selecting a documentation version (shown in your screenshot)? I have tried going to https://ko.infragistics.com/support, then clicking "Developer, Angular" which is a link to https://ko.infragistics.com/support/ignite-ui-angular-help . From there I then tried each of the links on that page. I was able to find that drop down a few days ago, for some reason I am unable to locate it now.
Hi Shannon,
I am glad that you were able to achieve your requirement!
The dropdown is part of the API pages here.
Let me know if you have any other questions on the matter.
Best regards,Bozhidara Pachilova