How to render the ASP.NET Core Spreadsheet in full page?

This knowledge base explains how to render the ASP.NET Core Spreadsheet in full page. You can render the Spreadsheet in full page by assigning the height to the spreadsheet’s parent element. You can use the client height value of the document for this purpose.

The default value of the spreadsheet height property is 100%. It means that the spreadsheet component will occupy 100% of the height of its containing parent element in the DOM, which is the default behavior for HTML elements.

[CSHTML]

<div id="wrapper">
   <ejs-spreadsheet id="spreadsheet"></ejs-spreadsheet>
</div>

<script>
   var wrapper = document.getElementById('wrapper');
   // To set the height for the parent element based on the document height
   wrapper.style.height = (document.documentElement.clientHeight - 24) + 'px'; // Removed the header's height value of 24 from the client height of the document element to fit the spreadsheet in full screen. You can handle it like this if you have any elements in the DOM on your end to show the spreadsheet at full height.
</script> 

Additionally, if you want the spreadsheet to remain full-screen even when the window is resized, you can achieve this by refreshing the Spreadsheet using our resize() method. You can trigger this method in the resize event on the window while it is being resized.

[CSHTML]

<script>
   var wrapper = document.getElementById('wrapper');
   wrapper.style.height = (document.documentElement.clientHeight - 24) + 'px';
   // Function to adjust the height of the element to fit the screen
   function onResize() {
       wrapper.style.height = (document.documentElement.clientHeight - 24) + 'px';
       // Get the DOM element of the Spreadsheet
       var spreadsheetElement = document.getElementById('spreadsheet');
       // Access the instance of the Spreadsheet
       var spreadsheetInstance = ej.base.getComponent(spreadsheetElement, 'spreadsheet');
       spreadsheetInstance.resize();
   }
   window.addEventListener('resize', onResize); // Adjust height when the window is resized
</script> 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core-Sample-Spreadsheet-full-height268489336

Output:

Conclusion

I hope you enjoyed learning how to render the ASP.NET Core Spreadsheet in full page.

You can refer to our ASP.NET Core Spreadsheet feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Spreadsheet example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!