Setting grid column width to undefined

1 Answer 355 Views
Grid
Jacob
Top achievements
Rank 1
Jacob asked on 03 Aug 2021, 07:18 PM

Hi Team,

According to the Kendo React documentation, when the width of a grid column is set to undefined (and any such columns are AFTER columns that have defined set widths), that column (or set of any such columns) should take up the remaining space in the grid and resize as the grid is resized.  This is working correctly when the grid is initially rendered. 

However after this initial rendering we allow the user to manually resize the grid column (which also works correctly) and then we have a sort of "reset" action which sets the grid column's width back to undefined (with the expectation that the grid column would revert back to the original behavior of taking up the remaining space in the grid and resize proportionally as the grid is resized).

It is this resetting of the grid column's width back to undefined that is not properly re-rendering.

Is this a known issue?  We are working with version 4.3 of the Kendo React grids but are looking to upgrade to 4.7 soon; would it happen to be fixed in 4.7?

Thanks in advanced.

Jacob Yeh

1 Answer, 1 is accepted

Sort by
1
Accepted
Stefan
Telerik team
answered on 04 Aug 2021, 06:28 AM

Hello, Jacob,

This occurs because when the Grid is resized, its internal table element receives a fixed width, and only the columns with fixed width will be sized correctly after that.

If the Grid will have a reset mechanism, we can suggest setting a key prop for the Grid that will also be changed on that reset. This will re-mount the Grid and allow the columns to be sized as they were on the first render:

<Grid key={resetMe}>

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Jacob
Top achievements
Rank 1
commented on 04 Aug 2021, 12:59 PM

Stefan,

Thanks for the update.  I will try setting the key for the grid as you suggested but one point of clarification: the grid itself was not resized in my example.  I only resized the grid column (and also locked/froze a column and re-ordered some of the columns) and then when our "reset" action occurred the grid re-rendered and properly restored the original order of the columns and unlocked any locked columns but when the column width was set to undefined it did *not* restore/resize the columns.  The column widths stayed at their resized values instead of getting "reset" like the locked columns and rearranged columns.

I will try setting the key though and see if that resolves the issue.

Jacob
Top achievements
Rank 1
commented on 04 Aug 2021, 03:55 PM

Stefan,

That totally works.  Thanks for the fix.  Does Telerik consider this to be a bug that will be fixed or should I just continue with the fix you proposed and document that?

Thank you!

Jacob

Stefan
Telerik team
commented on 05 Aug 2021, 11:04 AM

Hello, Jacob,

I'm happy to hear that the proposed solution is working as expected.

Currently, we do not consider this an issue as it is the expected result after resizing the columns. If in the future we have an option to combine both resizing and no width for some columns this will be noted in the changelog. Until that, the suggested approach can be considered the official one.

Tags
Grid
Asked by
Jacob
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or