Change the height of the grid dynamically

[Kamil Krzyzanski]

Hi,

I try to change height of the grid dynamically.

Grid enable virtualization.

Unfortunetly when I dyanmically increase height and next I scroll data grid look like this:

I set height as 100% 

<div [attr.id]='gridContainerId'>

  <ejs-grid [id]="idGrid" height='100%' #gridNew [dataSource]='data' [enableHover]="false" rowHeight='25'

and only I change height of container  

let gridContainer = document.getElementById(this.gridContainerId);

 gridContainer.style.height = (data.offsetRoute - 36 - 35).toString() + 'px'

Best regards

[Thiyagu Subramani]

Hi Kamil,  

  

Greetings from Syncfusion support. 

 

Based on your query you are facing issue in the grid when changing the grid height dynamically. By default, in EJ2 Grid when we define the height to 100% requires the Grid parent element to have explicit height. Please refer the below documentation and working sample for more information.  

  

Documentation: https://ej2.syncfusion.com/documentation/grid/scrolling/#responsive-with-parent-container 

 

We have prepared a sample in Grid with virtualization, and we change the dynamic height using the button click but we did not face the mentioned issue at our end. 

  

[App.component.html]  

  

<button ejs-button [isPrimary]="true" (click)="btnClick()">Change parent height</button> 

  

<div class="control-section" style="height: 600px">        

    <ejs-grid #grid class="e-gridcontrol" [dataSource]='vData' [enableVirtualization]='true' [enableColumnVirtualization]='true' height='100%' >  

  

    </ejs-grid>  

</div>  

  

[App.component.css]  

// we need to set height as 100% for Grid element too. 

    .e-gridcontrol {  

      height: 100%;  

    }  

  

btnClick(){ 

      var gridContainer = document.getElementById('Parent_container'); 

      gridContainer.style.height = 400 + 'px' 

    } 

  

Sample : https://stackblitz.com/edit/angular-qkgeev-hg4v6y?file=app.component.html  

  

If you still faced the issue you, please get back to us with the below details. 

 

1. Share the complete Grid rendering code. 

 

2. If possible, please try to replicate the issue in the given sample. 

 

3. Syncfusion Package Version. 

  

Regards,  

Thiyagu S 

[Kamil Krzyzanski]

Thank you for response.

I found my mistake. I had set pageSize:10 in my local storage.

When I change pageSize as 50 It works.

I added your suggestions to my code and It works great. 

Thank you for help.

Regards

[Thiyagu Subramani]

Hi Kamil, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S