Excel export - Freeze headers and expand to fit?
4 Replies
Hi Ryan,
Greetings from Syncfusion support.
Query: We're getting request from our users that they'd like to have the headers of the excel export be frozen (so when they scroll they can still see the headers)
You can freeze a portion of the sheet to keep it visible while you scroll through the rest of the sheet. Please refer the below code example and sample for more information.
|
[App.component.ts]
public toolbarClick(args: ClickEventArgs): void {
switch (args.item.text) {
case 'Excel Export':
const GridExport: Promise<any> = this.grid.excelExport({}, true);
GridExport.then((workbook: any) => {
// here we can access the workbook and set the number of rows should be freeze
workbook.worksheets[0].freeze = { row: 1 };
const book: Workbook = new Workbook(workbook, 'xlsx');
book.save('Export.xlsx');
});
}
} |
Query: they would like all the cell widths to expand to fit the longest text. Is there any way to accomplish these in the excel output?
Excel export don’t have support for fit the cell widths to based on the cell content. However the width of the excel columns are set based on the Grid columns width.
So if we have applied autofit in the Grid, It will be accomplished in the exported file too. Please refer the below code example and sample and screenshot 0for more information.
|
[App.component.html]
<div class="control-section">
<ejs-grid #grid [dataSource]='data' (dataBound)="databound($event)" allowPaging='true'
height=400 [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true'>
. . .
</ejs-grid>
</div>
|
|
[App.component.ts]
public databound () {
var sum = 0;
this.grid.autoFitColumns();
let columns = this.grid.getColumns();
for (var i = 0; i< columns.length; i++) {
sum = sum + parseInt(columns[i].width as any);
}
this.grid.width = sum;
} |
Please let us know, if you need further assistance.
Regards,
Manivel
SIGN IN To post a reply.
