Declined
Last Updated: 25 Mar 2024 13:34 by ADMIN
JJ
Created on: 08 Dec 2022 16:46
Category: Grid
Type: Feature Request
0
Setting a max width for columns that are not fixed in grids.

Not sure if this is already in the works but when building mvc grids it would be helpful to have the ability to prevent a column from getting too big when the screen size is larger than the grid needs. Right now if columns are turned off and there is more space for the unlocked columns, they expand to fill the page which is normally fine but in some instances it looks silly to have a column for example that you would enter a 2 digit number in to be 300 plus px wide.

 

Attached Files:
1 comment
ADMIN
Ivan Danchev
Posted on: 15 Dec 2022 14:06

Hello JJ,

The default behavior of the Grid (when Scrollable is set) is as follows: when the Grid's width (typically the width of the container the Grid is placed in, e.g., a div element) is greater than the sum of all column widths, the remaining space is distributed evenly between all columns. So the columns resize proportionally. If you do not set the Scrollable configuration in the Grid, the remaining space will still get distributed, if all columns have their Width option set and their total width is less than the Grid's width.

There is something that you can do to get around this behavior. It involves using an empty template column which will be the only one that doesn't have Width set. This way it will resize automatically, while the rest of the columns, all of which have Width set, will keep their width:

.Columns(columns =>
	{
		columns.Bound(p => p.Freight).Width(150);
		columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(150);
		columns.Bound(p => p.ShipName).Width(150);
		columns.Bound(p => p.ShipCity).Width(150);
		columns.Template(t => t.ShipCity);
	})

This way you can set a smaller desired width to the column that is supposed to show a 2 digit number and it will maintain that width.

Let us know whether that works out for you.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.