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

Calculate Height of Angular Grid

Hello Team,

I have to set available container height to Grid, but once I am setting any height to height property for eg. 10. But grid is excluding Header and Footer from this height preference.

I want to set entire grid within 100 with freazed header

1 Reply

BS Balaji Sekar Syncfusion Team February 3, 2020 12:41 PM UTC

Hi Deepak, 
Thanks for contacting us. 
We have validated your requirement. You can achieve your requirement, by dynamically setting the grid height. Please refer the below code example and sample for more information. 
<div class="control-section"> 
    <ejs-grid [dataSource]='data' #grid (dataBound)='dataBound()' allowPaging='true' height='350'> 
. . . 

. . . 
export class AppComponent { 
    public data: Object[] = []; 
   @ViewChild('grid', {statictrue}) 
   public grid: GridComponent; 
    ngOnInit(): void { 
        this.data = orderDetails; 
    dataBound () { 
    let changedHeight = this.grid.element.getBoundingClientRect().height - parseInt(this.grid.height as string); 
//dynamically setting the grid height including header and footer 
    this.grid.height = parseInt(this.grid.height as string) - changedHeight; 

Please get back to us with the complete Grid, if you need further assistance. 
Balaji Sekar. 

Live Chat Icon For mobile
Up arrow icon