3 Answers, 1 is accepted
0
Hello Yuriy,
The Grid columns do not have a min-width property and setting such is not supported, as the table cells (TD) elements that represent the column content do not support such an option when the table layout is "fixed".
For all practical purposes you can use the "width" and "minResizableWidth" properties instead. The default Grid behavior (inherited from the HTML tables standards) is as follows:
When the Grid is scrollable (the default) and the widths of all columns are set explicitly, If the sum of the widths of the columns exceeds the width of the Grid wrapper, a horizontal scrollbar will appear and all columns widths will be respected. If the sum of the widths of the columns is less than the available Grid width, the exceeding space will be distributed evenly between the columns.
When the widths of some columns are not explicitly set, and the available space is less than the sum of all columns that have their widths set, the columns with no width set will disappear. If the remaining columns' cumulative width is still greater than the available space, a horizontal scrollbar will appear as in the previous case.
As for the other question - having a floating horizontal scrollbar is not supported, but you can make sure that the Grid does not exceed the page's height so that the horizontal scrollbar at the bottom is always visible and accessible. For example, you can set the Grid's height such that it occupies 100% of the page regardless of the viewport's size like in the following example:
https://plnkr.co/edit/YtzTyZvpAUwgQwfMju7e?p=preview
https://www.screencast.com/t/N0R3qc6kNW
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
The Grid columns do not have a min-width property and setting such is not supported, as the table cells (TD) elements that represent the column content do not support such an option when the table layout is "fixed".
For all practical purposes you can use the "width" and "minResizableWidth" properties instead. The default Grid behavior (inherited from the HTML tables standards) is as follows:
When the Grid is scrollable (the default) and the widths of all columns are set explicitly, If the sum of the widths of the columns exceeds the width of the Grid wrapper, a horizontal scrollbar will appear and all columns widths will be respected. If the sum of the widths of the columns is less than the available Grid width, the exceeding space will be distributed evenly between the columns.
When the widths of some columns are not explicitly set, and the available space is less than the sum of all columns that have their widths set, the columns with no width set will disappear. If the remaining columns' cumulative width is still greater than the available space, a horizontal scrollbar will appear as in the previous case.
As for the other question - having a floating horizontal scrollbar is not supported, but you can make sure that the Grid does not exceed the page's height so that the horizontal scrollbar at the bottom is always visible and accessible. For example, you can set the Grid's height such that it occupies 100% of the page regardless of the viewport's size like in the following example:
https://plnkr.co/edit/YtzTyZvpAUwgQwfMju7e?p=preview
https://www.screencast.com/t/N0R3qc6kNW
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Yuriy
Top achievements
Rank 1
Rank 1
answered on 04 Apr 2018, 08:54 PM
Hi Dimiter,
I can't get minResizableWidth working. Maybe I'm doing something wrong. Can you provide a plunker working example?
Thanks,
Yuriy
0
Hello Yuriy,
Sure. You can take a look at the following example:
https://plnkr.co/edit/GDD9AHinYFDQ967jra6Z?p=preview
The minResizableWidth property of the "Name" column is set to 100, and thus this column cannot be resized to a smaller width. Note that the Grid needs to be resizable for the minResizableWidth property to be acknowledged.
Let us know if you have further questions.
Regards,
Dimiter Topalov
Progress Telerik
Sure. You can take a look at the following example:
https://plnkr.co/edit/GDD9AHinYFDQ967jra6Z?p=preview
The minResizableWidth property of the "Name" column is set to 100, and thus this column cannot be resized to a smaller width. Note that the Grid needs to be resizable for the minResizableWidth property to be acknowledged.
Let us know if you have further questions.
Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.