Scrolling - Responsive with parent container (Autoheight)

[Viktor]

Hi!
i know that it works out of the box but it requires the grid parent element to have explicit height:

Responsive with parent container

but is it possible to set the height of the grid dynamically even if the height of the parement element doesn't have an explicit height?
thanks!
regards
viktor

[Hariharan J V]

Hi Viktor, 

Thanks for contacting Syncfusion support. 

Query: is it possible to set the height of the grid dynamically even if the height of the parement element doesn't have an explicit height?
thanks! 

It is not possible to operate grid responsively without having explicit height to the grid parent element. So to achieve your requirement, initially we have rendered without the parent element height and in the grid created event, we have set the grid parent element height dynamically with the window height. Please refer to the below sample and documentation for your reference. 

Code Example: 

[.ts] 

... 

@Component({ 

    selector: 'app-container', 

    styles: [ 

    '.e-resizable {resize: both;overflow: auto;border: 1px solid red;padding: 10px;min-height: 250px;min-width: 250px;}' 

    ], 

    template: `<p class="e-text"> The parent container can be resizable by dragging the bottom-right corner.</p> 

               <div  class='e-resizable'> 

               <ejs-grid id='grid' [dataSource]='data' (created)="created()" height='100%' width='100%'> 

                <e-columns> 

                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 

... 

                </e-columns> 

               </ejs-grid> 

               </div>` 

}) 

... 

    created(){ 

      var grid = document.getElementById("grid"); 

      grid.parentElement.style.height = window.innerHeight+"px"; 

    } 

} 

Sample: https://plnkr.co/edit/EEEm7BvaoD5KaLrTQHVp?p=preview   

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#created  

Regards,  

Hariharan 

[Viktor]

Hi Hariharan,

many thanks for your support!
just a quick question:  is it  somehow possible to adapt your  solution on browser window resize?
any tip?

thanks!

regards

Viktor

[Viktor]

i have found a solution but its look like the rendering doesn't work well if grid has frozen columns

https://next.plnkr.co/edit/GJSRwQmJPqVjmRuE

just resize the browser window and take a look at the last rows of the grid (and vertical scrolling)

regards
viktor

[Venkatesh Ayothi Raman]

Hi Viktor, 

Thanks for your update. 

Query: just resize the browser window and take a look at the last rows of the grid (and vertical scrolling) 

We have analyzed your query and we have found that passing height property to the grid parent element in created event is the cause of this issue. Since passing height property to the parent element also seta a static height to the frozen content of the grid. So to override the frozen content height, we have used dataBound event of the grid. In the function, we are setting the height of the frozen content as “100%” as per the requirement. Please refer to the below sample for your reference. 

Code Example: 

[.ts] 

... 

   dataBound(){ 

        this.grid.getContent().querySelector(".e-frozencontent").style.height="100%"; 

    } 

... 

Sample: https://next.plnkr.co/edit/eh21mNHSb05aXPQm  

Please get back to us for further assistance. 

Regards,  

Venkatesh Ayothiraman.