Grid is unstable when gridItemCount exceeds 600K

State Not Answered
Replies 3 replies
Subscribers 7 subscribers
Views 828735 views
Users 0 members are here

Poomani K posted over 5 years ago

I'm Using igx-grid in my angular application. Virtualization is enabled. When I set the gridItemCount to 700000 and use the scroll feature the grid behaves weird and slow. After a scroll it leaves top portion of the grid invisible. Scrolling the grid using the scrollbar to the right, continuously emits scroll event after stopping the scroll. From What i can see it is in someway related to calculating the rowIndex overflows.

RowHeight is unchanged(50px).

Total number of Rows is set to 700000 and Virtualization is turned on.

P.S I don't need pagination

Thanks for help.

16310

Offline Hristo Anastasov posted over 5 years ago in reply to Poomani K

Thank you for all the information,

a developer of ours is currently having a look at that behavior and will update you here with any findings.
Cancel
Reply

Cancel
15

Offline Poomani K posted over 5 years ago in reply to Hristo Anastasov

Hi Hristo Anastasov,

Thanks for your reply.

I'm on ignite-angular v7.3.4. I tested with Chrome, Opera and Edge (lags more than the rest). Same observation persists across all the browsers. One thing I could also notice apart from the above said problem is, virtual scroll performance gets worse as the IgxGridComponent.totalItemCount increases, and it goes out of control after exceeding 600K. My gut feeling is the "index calculation" function is taking longer time to calculate the scroll bar position.

The columns are not templated(in fact [autoGenerate] = 'true' ), the rows are also not templated. Here a link to the video of issue I'm facing. https://youtu.be/zmhYsGParoc

Here's the HTML Content

<igx-grid #grid style="z-index: 0;" id="grid" [primaryKey]="'rowId'"  [data]="defectData"

  [paging]="false" [rowSelectable]="true"  [height]="'600px'"

   [autoGenerate]='true' (onDataPreLoad)="processData(false)"  > </igx-grid>

Please help we any alternative than paging.

I can assure the following,

The data is served from defectData : any[] (refer the above html) no delay is made by the obeservable. the data comes a constant rate irrespective of the number of rows

Following is the related typescript:

processData( bool : boolean ){

observable.subscribe( data => {

this.defectData = data; //12 row per scroll .startIndex is taken from grid.virtualizationState.startIndex.

this.cdr.detectChanges() //this will update the table with the values.

});

}

when totalItemCount set to 700k and scrolled once. the scroll is continues till the end of the table (i.e 700000'th row).

the processData function is called multiples with grid.virtualization.startIndex increasing a rate like 2 , 14, 34, 81, 193, 462, 1101, 2626, 6263, 14934, 35610, ......

I think I best explained the problem from my part. Thanks
Cancel
Reply

Cancel
16310

Offline Hristo Anastasov posted over 5 years ago

Hi Poomani,

Please let us know the version of Ignite UI for Angular that you are using and if the grid has any templated columns. Also, is this behavior the same in all major browsers ? Does it make any difference between IE, Edge and Chrome ? I am looking forward to hearing from you.
Cancel
Reply

Cancel