Can you use minWidth without enabling Resizing

Hi Syncfusion Team,


I was wondering if you can use the minWidth property for responsive purposes.


syncfusion grid example.png

So this is my grid and what I want to do is to set fixed widths to the columns Online, Settings, PLZ, Land, Erstellt am and Aktiv/Inaktiv and make the others columns responsive BUT with a fixed minWidth, so they cannot get smaller than for example 200px.


I have set fixed Widths to those columns and tried to make the others responsive with the minWidth property but it didn't work (I guess i have read in another thread that the minWidth property only works with resizeable grids, which I don't want).


Some further details: The Grid should automatically manage the width of the other columns to look good on 1080p monitors and 4k monitors but it should be horizontally scrollable on laptops with lower resolutions and tablets.


So my question is, is there a way you can set minWidths to theese columns? 


Kind Regards, Peter.


4 Replies

JC Joseph Christ Nithin Issack Syncfusion Team January 20, 2022 04:24 PM UTC

HI Peter, 

  Greetings from Syncfusion support. 

  By default in EJ2 Grid, for example if we set `minWidth`  as ‘150px’ for a column and we resize the browser window, the browser will stop resizing at a point where it shows only 30px of the column and the rest of the column will be hidden and we have to scroll the horizontal scrollbar to see the remaining of the column. But your requirement is the browser should stop resizing at a point where it shows all the  `150px` of the column without rendering the horizontal scroll bar.  

  We are currently validating the feasibility of your requirement in the EJ2 Grid and we will provide further details on or before 24th January 2022. We appreciate your patience until then. 

Please get back to us for further details. 

Regards, 
Joseph I. 



JC Joseph Christ Nithin Issack Syncfusion Team January 24, 2022 04:55 PM UTC

Hi Peter, 

  Thanks for your patience. 

  By default in EJ2 Grid, when the width is not set to the column the columns width will be adjusted based on the browsers width or the screen resolution and the columns will be divided in such a way the grid is adjusted to the width of the browser or resolution of the screen. If we set static width to some columns and left other columns without setting width then the columns whose width are set will be rendered with the width set and other columns will adjust their width to the browser’s width or screen resolution. 

  In your case you have set the width to some of the columns and  minWidth to other columns. In this case if the resolution of the screen changes, the width of the columns with defined width will have the same width and the other columns having minWidth will be adjusted. If the total width of the columns with minWidth along with the specific width is greater than the width of the screen. Then the columns with specific width will have the same width and the columns with the minWidth will have the width same as minwidth. Hence to view all the columns we have rendered the horizontal scroll bars. 

Please get back to us for further details. 

Regards, 
Joseph I.    



PL Peter Linecker January 25, 2022 10:51 AM UTC

Hi Syncfusion Team,


I tried the approach with the minWidth property again like I did last time and now it is working. I think I did something wrong in my previous attempt but I'm not sure what it was.


Anyways thanks for your help!


Kind Regards, Peter



JC Joseph Christ Nithin Issack Syncfusion Team January 26, 2022 11:44 AM UTC

Hi Peter, 

  Thanks for your update. 

  We are glad that the issue has been resolved 

 Please get back to us for further details. 

Regards, 
Joseph I. 


Loader.
Up arrow icon