1. Home
  2. Forum
  3. Blazor
  4. How to set auto column width in grid column

How to set auto column width in grid column

I have an sfgrid in my web applications.I have set column width in % becuase of auto column width for all screen resolution.It works fine but I would like to know how to handle column width if the overall column width is greater than 100%.

That means,Horizontal scrollbar should come if column width is greater than 100%.


3 Replies
RN Rahul Narayanasamy Syncfusion Team January 11, 2022 01:00 PM UTC

Hi KINS, 

Greetings from Syncfusion. 

We suspect that you are facing difficulties while setting Grid Width as 100%. We would like to inform you that by default Grid component will adjust to the browser width and height when it is not defined in Grid. If you have defined the Width as 100%, Grid will occupy and adjust to its immediate parent width. 

If you want adjust the Grid component to adjust to container, kindly specify the static height / width to its immediate parent element. Refer the below documentation to adjust the Grid component to its container and render horizontal scrollbar to Grid not the browser.  


If it does not meet your requirement or if you are still facing the problem, then could you please share the below details. It will helpful to validate and provide a better solution. 

  • Full Grid code snippets.
  • Video demonstration of the problem.
  • Details about exact problem you are facing.
  • Share a simple reproduceable sample if possible.

Regards, 
Rahul 


KI KINS January 13, 2022 07:45 AM UTC

Please check my comments in below screencast and see the attached example code for your reference.

https://www.screencast.com/t/X14No5PeLUw



Attachment: DataGrid_Server89260148_(1)_b9ae1693.rar

RN Rahul Narayanasamy Syncfusion Team January 14, 2022 12:09 PM UTC

Hi KINS, 

Thanks for the update. 

We would like to inform you that the scrollbar will be displayed in the DataGrid when content exceeds the element Width or Height. The horizontal scrollbar appears when the sum of columns width exceeds the Grid element width. If you have not provided any Width and Height to the Grid, then the default value will auto. Find the below documentation for your reference. 

Reference: 

From your shared details, you have not set any Width to the Grid. So by default it sets to auto. So it takes the Width based on the browser window. So all columns Width is not exceeding the default width(auto). So the horizontal scrollbar was not appeared. 

Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon