prevent column widths resizing to container

Question

Hi,I have a GridComponent in a div that has a width of 100% (basically it expands to the width of the browser).When I load my data into the GridComponent it resizes all columns to be tiny, to fit into the size of its container.I want it to either (a) size the columns to fit the content and show a horizontal scrollbar when needed or (b) size the columns to a fixed, prespecified width (i.e. 120px) and show a horizontal scrollbar when required.Nothing I try seems to work! Must be possible, without having to hardcode widths.Thanks,

Sujith Kumar Rajkumar · Answer

Hi Suresh, 
 
Greetings from Syncfusion support. 
 
Based on your query we would like to let you know that when ‘100%’ width is set to the Grid the horizontal scrollbar will not be rendered and the total columns will be adjusted within the content area. This is the default behavior for this case and will be the same while setting individual widths to the column. 
 
So for achieving your requirement we suggest you to set the parent container’s width to a specified value after setting the Grid width to ‘100%’. With this approach the Grid will be rendered responsive to its parent container and so the columns width be adjusted and horizontal scrollbar rendered based on the total columns. 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/react-4b4vny?file=index.js  
 
More details on responsive Grid can be checked in the below documentation link, 
 
Documentation: https://ej2.syncfusion.com/react/documentation/grid/scrolling/#responsive-with-parent-container  
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Suresh · Answer

Thank you for your reply. Unfortunately, I have no way of knowing or setting the width of the parent container.This is normal behavior in many responsive apps. My parent container width is set to 100% so it scales to whatever the size of the window/device.There must be some workaround?The grid is unusable without one.

Sujith Kumar Rajkumar · Answer

Hi Suresh, 

As mentioned in our previous update when 100% width is set to the Grid, then it will automatically adjust its content within that space without rendering a horizontal scrollbar. This is the default behavior as in a normal table and so it cannot be changed. So if you do not wish to set a specific height to the parent container then we suggest you to achieve your requirement by setting widths for the Grid columns. So with this case when the content width exceeds the scroll width, then the horizontal scrollbar will be rendered automatically. 

We have prepared a sample to demonstrate this scenario for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/react-4b4vny-qbacge?file=index.js  

Let us know if you have any concerns. 

Regards, 
Sujith R