Hello,
I would like to have horizontal scroll if the content is bigger than a certain size, and otherwise the grid takes the 100% width. At the moment, if I set width for all columns the grid does not take the full width, and If I don't it won't have horizontal scroll.
So, I thought one way to reach this aim is to have a possibility to set min-width for columns, but it seems there is no such feature.
Thanks,
Mojtaba
3 Answers, 1 is accepted
I am afraid I am not entirely sure what is meant by "At the moment, if I set width for all columns the grid does not take the full width" as by default the Grid will take the full available width of its container.
Otherwise, the scrollable Grid behaves like the regular HTML table with fixed layout, more specifically:
1) When all column widths are explicitly set, and...:
1.1) the cumulative column width is greater than the available Grid width - a horizontal scroll bar appears and all set column widths are respected
1.2) the cumulative column width is less than the available Grid width - the remaining width is distributed evenly between all columns
2) Only some column widths are set:
2.1) the cumulative width of columns with set width is greater than the available Grid width - a horizontal bar appears and all set column widths are respected, columns with no width set are invisible (as their width is 0)
2.2) the cumulative width of columns with set width is less than the available Grid width - the the widths of the columns with a set width are respected, the remaining width is distributed evenly between the other columns
3) No column widths are set - the available width is distributed evenly between all Grid columns
There is no built min-width option, but in practice the column component width option serves a similar purpose - when Grid columns are set, and the cumulative widths of all columns is less than the available Grid width, the remaining space will be distributed evenly between all columns. However, when the sum of set column widths is greater than the available Grid width, the horizontal scrollbar will appear, and all columns widths will be as set - for example:
https://stackblitz.com/edit/angular-13szpx?file=app/app.component.ts // resize the right-hand side pane where the example is run to observe the described behavior - when the available width falls below the sum of all column widths set, a horizontal scrollbar appears.
I hope this helps, but if the issue persists, please send us a similar isolated runnable project, and describe how exactly the observed behavior differs from the expected one, so we can inspect it further, and try to provide a suggestion that is most suitable to the specific use case.
On a side note, if the Grid is resizable, there is minResizableWidth option that sets the minimum width a column can be resized to. In such scenarios, when grid columns are resized so that the new width is less than the available Grid width, columns are no longer enlarged to fit the available width automatically, but instead a white space appears in the right-hand side of the Grid:
https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimiter,
Thank you very much for the nice and complete explanation. So, I will set width for all columns and if the width of the grid's container is bigger than the sum of the widths, the remaining width will distributed among columns.
However, I suggest to add this explanation about the purpose of width into your documentation. The reason is that, coming from CSS background, one may mistakenly think that setting the width for all columns will give a fix width for the grid so that it won't enlarge in bigger container.
Regards,
Mojtaba
I am glad the explanation helped. We are indeed considering to add a more detailed explanation about how the Grid behaves in various scenarios where setting the width of the columns is involved in our documentation.
Regards,
Dimiter Topalov
Progress Telerik