Grid - Set Column Width by Percentages or Pixels

ADMIN

Carl

Posted on: 23 Sep 2019 08:57

Hey everyone,

As an update here I wanted to highlight that we have improved our documentation around columns and their width to help with these kind of scenarios. Specifically, for percentages we have this section that covers how to approach this with the current implementation of the KendoReact Grid. I'll be marking this item as complete!

Regards,
Carl
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

ADMIN

Stefan

Posted on: 13 Jun 2019 07:46

Hello, Michael,

Thank you for reporting this.

We made improvements to the ColumnMenu, but unfortunately forgot the change the demo logic. We will update it right away.

I have updated your Telerik points for bribing this to our attention.

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

Michael

Posted on: 13 Jun 2019 06:42

Thanks Stephan - on a totally unrelated note:

The example on your website for "Customizing the Filter Component" throws an error when you apply a filter:

https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/#toc-customizing-the-filter-component

Thanks

Michael

ADMIN

Stefan

Posted on: 12 Jun 2019 13:35

Hello, Michael,

I have created an example as promised that showcase this.

When the Grid is smaller the column will have the specified min width from the configuration and a horizontal scrollbar will appear. Then if the Grid is larger the columns will resize proportionally based on the available space:

https://stackblitz.com/edit/react-ncuw8g-a222yi?file=app/main.jsx

Here the resize event is not debounced to showcase the functionality, but it can be if needed.

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

ADMIN

Stefan

Posted on: 11 Jun 2019 14:07

Hello, Michael,

Thank you for the confirmation.

We will make an example showcasing how this can be achieved with the KendoReact Grid and once it is ready we will share it here.

The reason why it is not built-in is that is has some limitations, which may cause issues in the column virtualization which the KendoReact Grid supports and the jQuery version does not.

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

Michael

Posted on: 07 Jun 2019 07:54

Hi Stefan

That is correct; this is the desired behaviour. And is the way the JQuery grid currently behaves.

Thanks

Michael

ADMIN

Stefan

Posted on: 06 Jun 2019 11:56

Hello, Michael,

Thank you for the additional information.

Based on that I can assume that the desired result is that if the Grid is smaller, the column widths have to be take into account. Then if the width of the Grid is larger, these columns should expand and act like they do not have a fixed width set?

If this is the desired behavior, please let me know and we will consider adding it to the Grid or at least make an example on how it can be achieve with the current state.

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

Michael

Posted on: 05 Jun 2019 18:47

Hi Stafan

Try setting a column with for all the columns. You will see the column widths stretch and shrink relative to width of the preview pane.

Please see the two attached images.

Thanks

Michael

Attached Files:

ADMIN

Stefan

Posted on: 05 Jun 2019 10:36

Hello, Michael,

I have tested this in the jQuery Grid and if the width is set to 100, it will set it as expected to 100. Only the columns that does not have width will resize based on the Grid size. The same result is in the KendoReact Grid:

https://dojo.telerik.com/oVEqoLum

Please check the example and advise if I missed an important detail.

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

Michael

Posted on: 05 Jun 2019 00:34

With the Jquery version even though you specify a column width (e.g. width="100") the columns will grow and shrink relative to the screen size (making it somewhat responsive)

The React version currently seems to lack this behaviour - can it be added?

Thanks

Michael

ADMIN

Stefan

Posted on: 15 May 2019 09:55

Hello, Michael,

Thank you for the vote.

This is something we are researching, as it has specifics when it is used with MultiColumn headers and Resizing.

We want to see if there are official specifications on how this should behave to ensure that if this is released it will behave as expected by the users.

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

Michael

Posted on: 14 May 2019 18:06

This would be useful