Category / Section
How to render Spreadsheet in Full Screen Mode?
1 min read
This Knowledge Base explains how to render JavaScript Spreadsheet in the Full-Screen Mode. Use the client-side created event to achieve this requirement. Set the document client height to the spreadsheet height property to render in the full-screen mode.
[HTML]
<div id="spreadsheet"></div>
[TS]
//Initialize the spreadsheet component.
let spreadsheet: Spreadsheet = new Spreadsheet({
sheets: [
{
name: 'Car Sales Report',
ranges: [{ dataSource: (dataSource as any).defaultData }],
columns: [
{ width: 180 },
{ width: 130 },
{ width: 130 },
{ width: 180 },
{ width: 130 },
{ width: 120 },
],
},
],
created: (): void => {
//Apply cell and number formatting to specify a range of the active sheet.
spreadsheet.cellFormat(
{ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
'A1:F1'
);
spreadsheet.height = document.documentElement.clientHeight;
//Set height for a spreadsheet at initial load.
window.addEventListener('resize', function () {
//Set height for a spreadsheet while resizing the window.
spreadsheet.height = document.documentElement.clientHeight;
});
},
});
//Render the initialized spreadsheet component.
spreadsheet.appendTo('#spreadsheet');
Sample Link: https://stackblitz.com/edit/c42djg
Output:
Documentation:
https://ej2.syncfusion.com/documentation/spreadsheet/mobile-responsiveness/
