We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Autofitcolumns with frozen column causes chrome out of memory error

I have a grid with virtualization enabled and one frozen column.

I'm loading this grid with a few data, about 50 columns and 10000 rows, I'm calling the autoFitColumns in the grid dataBound method and this causes browser out of memory error.

If I don't call the autoFitColumns or if I set isFrozen to false in all columns, it works.


Sample: https://stackblitz.com/edit/angular-bhes9h?file=src/app/app.component.html

Just click on Load data button to reproduce the error.


1 Reply

VB Vinitha Balasubramanian Syncfusion Team October 18, 2022 12:55 PM

Hi Thiago Decker Franzener,


Greetings from Syncfusion support.


Query : Autofitcolumn with frozen column causes chrome out of memory error


We have analyzed your query, we could suspect that the reported problem occurs due to large amount of data. From your update we want to convey that if you want to render 10,000 rows with 100 columns it will take some time to render the data to the Grid.


We suggest to use row enableVitruvalization property and row enableVitruvalization property as “true” to resolve the reported problem. And also, to need to setup the content height by height property in pixel.


Help documentation : https://ej2.syncfusion.com/angular/documentation/grid/virtual-scroll/#row-virtualization

                                        https://ej2.syncfusion.com/angular/documentation/grid/virtual-scroll/#column-virtualization

Kindly refer the code and sample for your reference.


[app.component.html]
<div>

  <ejs-grid

    [dataSource]="data"

    [columns]="columns"

    [enableAltRow]="true"

    [enableVirtualization]="true"

    [enableColumnVirtualization]="true"

    [allowSorting]="true"

    [allowSelection]="true"

    [allowReordering]="true"

    [allowResizing]="true"

    [rowHeight]="17"

    gridLines="Both"

    width="100%"

    height="200"

    (dataBound)="onGridDataBound($event)"

  >

  </ejs-grid>


Sample link :
https://stackblitz.com/edit/angular-h9tmps?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html


Note : On the shared sample, you have used refresh method in the dataBound event, we have reverted the refresh method of Grid since not need to use in the dataBound event. If you want to use refresh method in the dataBound event you can use based on condition.  


Please get back to us for further assistance.


Regards,

Vinitha Balasubramanian

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Loader.
Live Chat Icon For mobile
Up arrow icon