There have been few discussions on the topic of column minimum widths. And the answers I found so far can be summarized to this:
1. Kendo UI grid does not support min-width for the columns;
2. Developer can set min-width css on the whole grid element;
3. A js function can capture event when user resizes individual column manually and prevent user to go under given width.
In a most user friendly way the column configuration should have taken column width in % and min-width.
Are there any plans to implement this feature?
Is there a known function which can work as window.onresize and resize grid columns proportionally with given column min widths? Can min widths be added to columns configuration and then accessed by this function?
Thanks!
1. Kendo UI grid does not support min-width for the columns;
2. Developer can set min-width css on the whole grid element;
3. A js function can capture event when user resizes individual column manually and prevent user to go under given width.
In a most user friendly way the column configuration should have taken column width in % and min-width.
Are there any plans to implement this feature?
Is there a known function which can work as window.onresize and resize grid columns proportionally with given column min widths? Can min widths be added to columns configuration and then accessed by this function?
Thanks!
7 Answers, 1 is accepted
0
Hello,
There is a columnResize event that the Kendo UI Grid fires every time the user tries to resize the width of the column. In this event you can determine what is the current width of the column and according to the preset width resize the column. Please check the following example and let me know if it helps:
http://jsbin.com/bitop/1/edit
Regards,
Kiril Nikolov
Telerik
There is a columnResize event that the Kendo UI Grid fires every time the user tries to resize the width of the column. In this event you can determine what is the current width of the column and according to the preset width resize the column. Please check the following example and let me know if it helps:
http://jsbin.com/bitop/1/edit
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ron
Top achievements
Rank 1
Rank 1
answered on 11 Sep 2014, 05:10 PM
Facing the same problem, I have tried your proposed solution Kiril. Unfortunately this bit of javascripting manages to CRASH Internet Explorer 11. Just try your own example on IE11 and you'll see that resizing the columns will crash IE11. Furthermore on older IE version, the solution just doesn't work. So I am in dire need of a working solution for IE.
Thanks,
Ron
Thanks,
Ron
0
Hello Ron,
The IE crash seems to result from the jQuery's attempts to obtain the width of each col element, but this happens on the second column resize, before the columnResize event had been fired. This is strange to say the least.
You can check this code library entry that uses a different implementation:
http://www.telerik.com/support/code-library/apply-minimum-column-width-during-column-resize
Generally, there is no single best approach, so choose the algorithm and user experience that suits you most (i.e. prevent the user from over-resizing during dragging, or restoring some predefined min/max column width after dragging).
Regards,
Dimo
Telerik
The IE crash seems to result from the jQuery's attempts to obtain the width of each col element, but this happens on the second column resize, before the columnResize event had been fired. This is strange to say the least.
You can check this code library entry that uses a different implementation:
http://www.telerik.com/support/code-library/apply-minimum-column-width-during-column-resize
Generally, there is no single best approach, so choose the algorithm and user experience that suits you most (i.e. prevent the user from over-resizing during dragging, or restoring some predefined min/max column width after dragging).
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ron
Top achievements
Rank 1
Rank 1
answered on 12 Sep 2014, 05:26 PM
I managed to implement a working and non-crashing solution by trying a similar approach as the post you linked. Thanks for that.
Having said that I do think that support for a minimum width for grid columns would be nice. Or even a fixed size or maximum size.
Having said that I do think that support for a minimum width for grid columns would be nice. Or even a fixed size or maximum size.
0
Hi Ron,
Thanks for your feedback.
I will forward it to the people responsible for the implementation of the Kendo UI Grid, so they will consider it for a future release.
In case you have any further questions, please do not hesitate to contact us.
Regards,
Kiril Nikolov
Telerik
Thanks for your feedback.
I will forward it to the people responsible for the implementation of the Kendo UI Grid, so they will consider it for a future release.
In case you have any further questions, please do not hesitate to contact us.
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Barry P
Top achievements
Rank 1
Rank 1
answered on 18 Aug 2018, 05:04 PM
It seems like this is critical functionality that is missing.
In my scenario, I have certain columns that I set to a fixed width due to their content. I expect the other columns to fill the remaining space. However, when the grid gets narrow, those other columns disappear and I have to write some JavaScript to implement a minimum width for those columns. It would be way easier to just be able to specify a minimum width for when the page itself resizes.
0
Hi Barry,
I agree this is a nice-to-have feature, but rather tricky to implement so that it works well in terms of practicality, user experience and performance.
Have you tried setting a min-width style to the Grid table? This is an easy and script-less approach to achieve always-visible width-less columns, which usually does the job. I hope this technique will fit your use case.
The following page provides more information and sample code snippets:
https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/columns/widths
On a side note, even if your scenario is complex and static min-width may not work well, you can consider applying variable min-width to the tables programmatically, instead of setting different widths to all columns.
Regards,
Dimo
Progress Telerik
I agree this is a nice-to-have feature, but rather tricky to implement so that it works well in terms of practicality, user experience and performance.
Have you tried setting a min-width style to the Grid table? This is an easy and script-less approach to achieve always-visible width-less columns, which usually does the job. I hope this technique will fit your use case.
The following page provides more information and sample code snippets:
https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/columns/widths
On a side note, even if your scenario is complex and static min-width may not work well, you can consider applying variable min-width to the tables programmatically, instead of setting different widths to all columns.
Regards,
Dimo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.