Calculate Height of Angular Grid

[Deepak Jain]

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

[Balaji Sekar]

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. 

 

[App.component.html] 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' #grid (dataBound)='dataBound()' allowPaging='true' height='350'> 

. . . 

    </ejs-grid> 

</div> 

[App.component.ts] 

. . . 

export class AppComponent { 

    public data: Object[] = []; 

   @ViewChild('grid', {static: true}) 

   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; 

    } 

} 

 

Sample: https://stackblitz.com/edit/angular-f-151115?file=app.component.ts 

 

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

 

Regards, 

Balaji Sekar.