Prevent auto row height expansion caused by newline characters

[Toprak Ünal]

I’m using Syncfusion EJ2 Angular Spreadsheet with virtual scrolling and a large dataset (50k+ rows).

Data is fetched from an API, and additional data is loaded as the user scrolls (lazy loading / incremental loading behavior).

Some cell values contain newline (\n) characters. When the Spreadsheet initializes, row heights are automatically expanded to fit multiline content. This results in very tall rows and causes performance issues.

Requirement:

• Fixed/default row height (e.g. 24px)

• No automatic row height expansion

• Newline characters should not affect row height

• What I tried:

• allowWrap = false

• setRowsHeight(24)

• setRowsHeight(24, 'Sheet1!1:1000')

Using a fixed range works, but the row count is dynamic and rows are loaded lazily. Repeatedly calling setRowsHeight or using lastRow leads to serious performance problems. 

On the other hand, allowWrap = false is not exactly what I need.

Sample data:

{
  "rootCauses": "[1] PT\n[2] PT\n[3] PT"
}

Questions:

1. Is there a way to disable automatic row height calculation globally?

2. Is there a default row height configuration that applies to virtualized rows?

3. What is the recommended approach for handling multiline text with virtualization?

Thanks.

[Babu Periyasamy]

Hi Toprak Ünal,

Thank you for reaching out to us.

We have reviewed the reported query based on the details you shared. We would like to inform you that when a cell value in the Spreadsheet contains newline characters, the Wrap Text feature is automatically applied to that cell, and the row height is adjusted accordingly.

To restrict automatic height calculation for all rows, you can use the setRow utility method along with the queryCellInfo event, which triggers whenever cell information is accessed. Within this event, check the rowIndex and update the row model by setting the customHeight property to true. This ensures that row height is not recalculated for cells where Wrap Text is applied, using the setRow method.

Additionally, if you want to maintain a standard height for all rows in the sheet, you can set the standardHeight property of the sheet using the setSheetPropertyOnMute method in the created event for all sheets. For newly added sheets, you can also set the standardHeight in the actionComplete event.

For your convenience, we have prepared a sample in which we have incorporated the above-mentioned configurations and attached below along with the code snippets and video demonstration for reference.

Code snippets:

<ejs-spreadsheet #default [openUrl]="openUrl" [saveUrl]="saveUrl" (created)="created()" (queryCellInfo)="queryCellInfoHandler($event)">

 

created() {

        ..

        let sheets = this.spreadsheetObj.sheets;

        for (let i: number = 0; i < sheets.length; i++) {

            //Set the standardHeight property of sheet model to update standard height for all rows.

            this.spreadsheetObj.setSheetPropertyOnMute(sheets[i], 'standardHeight', 30);

        }

        //To refresh the UI to update the standardHeight for all rows. 

        this.spreadsheetObj.resize();

    }

    queryCellInfoHandler(args: CellInfoEventArgs) {

        if (args.rowIndex || args.rowIndex === 0) {

            //Set the customHeight to true in the row model to restrict height calculation based on the content.

            setRow(this.spreadsheetObj.getActiveSheet(), args.rowIndex, { customHeight: true });

        }

    }

    actionCompleteHandler(args) {

        if (args.action === "insert" && args.eventArgs.modelType === "Sheet") {

            //Set the standardHeight if new sheet is added.

            this.spreadsheetObj.setSheetPropertyOnMute(this.spreadsheetObj.sheets[args.eventArgs.activeSheetIndex], 'standardHeight', 30);

        }

    }

 

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

Video demonstration:

Please review the above shared details and let us know if you have any further questions or concerns.

Regards,

Babu.