Monitor vs mobile

[Amos]

Hi

This is a general question about the styling concept between monitor and mobile screens.

While charts can be set with size (width and height), grids have a limitation of content (text), meaning it is hard to see a data grid with 10-20 columns.

I have 2 screens in my project with a data grid and each grid have 10-20 columns with data inside.

In the monitor (computer) I see the data clearly with a horizontal scrollbar to see more columns.

I didn't even check it but in the mobile, I might see 3-4-5 columns top and I'm not sure that a horizontal scrollbar will be convenient to the user.

What are the do's and don'ts for this in syncfusion? Is there an example or a guide for this matter?

Thanks

[Sujith Kumar Rajkumar]

Hi Amos, 

 

Greetings from Syncfusion support. 

 

We checked your query and based on that would like to let you know that you can render responsive columns in the Grid if you only need to show specific columns in mobile devices. This can be achieved by toggling the column visibility based on media queries using the columns hideAtMedia property which accepts valid Media Queries. More details on this can be checked in the below help documentation link, 

 

Responsive columns documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#responsive-columns 

 

API link: https://ej2.syncfusion.com/vue/documentation/api/grid/column/#hideatmedia 

 

You can also render a responsive Grid that automatically adjusts the Grid and column width based on browser size by setting the height and width of the Grid to “100%”(Makes the Grid element fill its parent container) and not setting width for any columns(Will be set as auto). Using this both the Grid and its columns will be adjusted based on browser size. 

 

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

 

With this the Grid will be rendered responsive in both monitor and mobile screens. Like how the scroll bar is used for scrolling through the columns, the mobile touch control can be used to scroll through columns in mobile devices without having to do this using the scrollbar. 

 

If we misunderstood your query then please share a pictorial or video demonstration to understand your requirement better. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Amos]

Hi

Thank you for your detailed response. I will take a look into it.

I look at the current grid layout I have with the filters and ~20 column which look very nice on a monitor and I can't seem to imagine how it will look on a small mobile device :) After all, I do want the user to see "everything".

I will play with it a bit.

Thanks

[Sujith Kumar Rajkumar]

Hi Amos, 

You’re welcome. Please check it and get back to us if you require any further assistance. 

Regards, 

Sujith R