Approved
Last Updated: 05 Mar 2019 15:07 by Blake
n/a
Created on: 05 Nov 2018 21:41
Type: Feature Request
14
Kendo UI React GridColumn component needs minWidth and maxWidth properties
Currently the GridColumn Component only supports width property.  It should also support minWidth and maxWidth properties for better responsive design.  https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/
10 comments
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.