Kendo UI React GridColumn component needs minWidth and maxWidth properties

ADMIN

Filip

Posted on: 10 Jan 2023 15:10

Hello, Phil,

We will consider the implementation of those two props as well.

Regards,
Filip
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/.

Phil

Posted on: 06 Jan 2023 14:15

Please also consider adding a property like spaceToFit on Grid, which would cause the columns to expand to fill up the length of the grid in the event that the total widths of the columns is less than the width of the grid.

spaceToFit on Grid, in combination with a minWidth property, would allow grids with a small number of columns and grids with a large number of columns to have a responsive display for all screen resolutions and zoom levels.

thank you.

ADMIN

Stefan

Posted on: 30 Mar 2020 06:19

Hello, Günter,

As the Kendo UI components for MVC share a different code-base, I can suggest submitting the same request for the MVC component as well.

As they are different products with different communities, they have different planing based on community requests. This is why if we make it for KendoReact it is not guaranteed that it will be added to the MVC components at the same time:

https://feedback.telerik.com/aspnet-mvc

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Günter Welzel

Posted on: 28 Mar 2020 17:30

This is also needed in other components like MVC.

ADMIN

Stefan

Posted on: 13 Aug 2019 12:42

Hello,

Please check our new article for the Grid column widths that contains new examples for dynamically controlling the column widths:

https://www.telerik.com/kendo-react-ui/components/grid/columns/width/

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

GokuJim

Posted on: 08 Aug 2019 12:32

I agree, we should be able to manage which columns get the increase and decrease of width when the window is expanded/contracted.

Jim

SKF USA, Inc.

Blake

Posted on: 05 Mar 2019 15:07

Great! Thanks

ADMIN

Stefan

Posted on: 05 Mar 2019 13:21

Hello, Blake,

I made an example of how it can be achieved.

It requires getting the Grid container width and setting the remaining width between these three columns equally:

https://stackblitz.com/edit/react-tqzpr2-md4yih?file=app%2Fmain.js

Similar logic can be used for a different number of columns.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Blake

Posted on: 04 Mar 2019 22:00

Stefan,

I've got a situation where I have an 8 column grid and want 3 of them to be a minimum of 150px but stretch if the window is large enough to handle larger widths.

This grid contains the following: col1 80px, col2 <no width>, col3 100px, col4 <no width>, col5 <no width>, col6 100px, col7 85px, col8 85px.

By default I'd like col2, col4, and col5 to be as large as possible but no less than 150px.

So when the grid has less than 900px I want to force the user to scroll horizontally to see all the content, instead of streaching row heights or removing the 3 columns from the grid entirely.

On the other hand, if the grid has 1700 pixels or so I'd like all 3 columns to share the remaining width available over 900px.

Can that be achieved or am I missing something? Seems like it's a pretty basic request.

Thanks
Blake

ADMIN

Stefan

Posted on: 04 Mar 2019 08:41

Hello, Bastian, Erik,

With the current version, it can be achieved using the following approach:

1) Set the width of the last column to a value of the state.
2) Attach an event listener to the window resize event
3) Dynamically set the width to an empty string(automatically stretch) or fixed when the screen is small.

This is an example:

https://stackblitz.com/edit/react-tqzpr2?file=app/main.js

I hope this will prove helpful.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Bastian

Posted on: 27 Feb 2019 08:46

Hello Stefan,

"Also, if the column should not be hidden at any point, could you please clarify, why setting an initial width is not an option? "

When setting an initial width, then the column is not stretched to the maximum space available.
For exaple I want to define 6 columns, where 5 columns are fixed size columns. The 6th column should fill the remaining space available but should not be smaller than a defined value.

With the current version this scenario is not supported, is it?

Erik

Posted on: 26 Feb 2019 22:56

I would also like to have a min-width for columns. In particular, I want to set a minimum so that I can make sure the columns are legible and if the view is too narrow then it allows the user to scroll horizontally.

I can achieve something similar by setting the width but then it does not stretch to the whole view when the view is large.

ADMIN

Stefan

Posted on: 11 Feb 2019 09:39

Hello, Bastian,

The minResizableWidth is expecting a number(not sting with px). This property is working when resizing the column trought the UI:

"The width of the column (in pixels) below which the user is not able to resize the column through the UI"

If the desired result is to apply this minWidth when the Grid is resized not the column, please let us know.

Also, if the column should not be hidden at any point, could you please clarify, why setting an initial width is not an option?

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Bastian

Posted on: 07 Feb 2019 08:18

Hello Stefan,

as you can see in my example the property "minResizableWidth" has no effect. The column "CategoryName" is still invisible. Then it seems to be a bug?

https://stackblitz.com/edit/react-gwnrsn?file=app/main.js

Best Regards

Bastian

ADMIN

Stefan

Posted on: 07 Feb 2019 07:51

Hello, Jonathan,

Thank you for the request.

The GridColumn already has a min-width property, it is called "minResizableWidth":

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-minresizablewidth

We will consider adding a max-width as well.

I have updated your Telerik points for this request.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Bastian

Posted on: 06 Feb 2019 12:28

We also need this feature. If there is a GridColumn with no "width" defined, the column is autosized to fill the grid. If there are many Columns in the grid, the column with no defined width may be invisible, because it is autosized to 0. To prevent this autosize to 0 a minWidth property is required.

Example:
https://stackblitz.com/edit/react-gwnrsn?file=app/main.js

The column

<Column field="Category.CategoryName" title="CategoryName" />

is not visible in the Grid.