IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.
https://www.infragistics.com/products/ignite-ui-angular
Other
568 stars 159 forks source link

Row Selection: bad performance with large amount of data #14444

Open Timmeeeey opened 3 days ago

Timmeeeey commented 3 days ago

Description

Since version 18.0.1 there is a performance drop in row selection when there are lots of rows. This is because of the nested this.grid.gridAPI.get_all_data(true).find() in the this.rowSelection.forEach().

https://github.com/IgniteUI/igniteui-angular/blob/7ea822c488140bb2e96e1becfb8abd37cf04489a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts#L402-L408

This could be significantly improved by creating a map beforehand and using this.

const selection = [];
const gridDataMap = {};
this.grid.gridAPI.get_all_data(true).forEach(row => gridDataMap[this.getRecordKey(row)] === row);
this.rowSelection.forEach(rID => {
  const rData = gridDataMap[rID];
  const partialRowData = {};
  partialRowData[this.grid.primaryKey] = rID;
  selection.push(rData ? rData : partialRowData);
});

Attachments

Without fix: 2024-06-27_14h25_59

With fix: 2024-06-27_14h26_30