Grid Responsive

[Surya]

Hi,

I want to make my angular grid responsive , I want to check on mobile browser also with out hiding any column with horizontal scroll. Can you please help me on this ?

this is my grid stackblitz https://stackblitz.com/edit/angular-ivy-wi5ccj?file=package.json 

In 768 pixel resolution its showing like below screenshot, I don't want column to be too clustered

[Praveenkumar Gajendiran]

Hi Ashok,

Greetings from Syncfusion support.

Based on your query, we would like to inform you that, be default, we have Adaptive view support in the EJ2 Grid.  In the Grid’s Adaptive view feature, The Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens.  

This interface will render the filter, sort, and edit dialogs adaptively and have an option to render the grid row elements in the vertical direction.

Please refer the below Online demo and documentation for more information on this.

Online Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/adaptive

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/adaptive/ 

For using Gris’s Adaptive view feature, we need to enable the enableAdaptiveUI property which is used to render the grid filter, sort and edit dialogs adaptively and set rowRenderingMode property which is used to render the grid row elements in the following directions, 

• Horizontal - Renders the grid row elements in the horizontal direction.
• Vertical - Renders the grid row elements in the vertical direction.

enableAdaptiveUI - https://ej2.syncfusion.com/angular/documentation/api/grid/#enableadaptiveui
rowRenderingMode: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowrenderingmode 

Note: To render the Grid in mobile mode, Grid element’s parent container must contain the e-bigger class. 

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G