Hello,
Having asked this question about how to set-min-width-for-columns, I wan to know is there any way to set max width fro columns in grid. As explained in that question, "when all column widths are explicitly set, and the cumulative column width is less than the available Grid width - the remaining width is distributed evenly between all columns"; however, in that case, I don't want some columns become wider than a certain point. For example, a check box column.
Is there any solution to prevent that?
Thanks,
Mojtaba
10 Answers, 1 is accepted
Hi Mojtaba,
In general, the explanation that my colleague shared in the mentioned thread, is still valid and setting min--width or max-width to the Grid columns is not supported as HTML table elements ignore these settings.
Currently, there is no support for setting the maximum width of the Grid columns, but if you have the time, please submit a feature request to our Feedback Portal to help us estimate the customer demand for such an enhancement and prioritize accordingly when updating our roadmap
However, to avoid such resizing of a column (like checkbox column), set its [width] property and add at least one more column without a set [width]. The columns without width will occupy the available space when the cumulative column width is less than the available Grid width:
https://stackblitz.com/edit/angular-cinaae-jnsxhn?file=app/app.component.ts
I hope this helps. Let me know if there is something unclear about the demonstrated example or I can assist any further.
Regards,
Martin
Progress Telerik
Hi Serge,
I am not entirely sure what you meant, but the described case above is still valid.
If the last column should persist its initial width, then set the width property of that column and leave the rest (or just one) without set width.
As a side note, I want to mention that the development team is currently working on providing a built-in max-width property of the Grid. It is planned to be released in mid-September this year.
Hi Martin,
Thank you for the reply.
I made a feature request, hopefully it will be approved. About your work around for leaving a column without width, I think that is not ideal because in big screens you will end up with a very big column while other columns are still suffering from lack of space.
Regards,
Mojtaba
Hi Mojtaba,
Let me suggest two other approaches of how the use-case scenario could be handled.
There could be two (or more) identical columns defined. Their only difference would be the width. These columns could be displayed dynamically depending on the screen size. Such behavior can be achieved utilizing the media property of the columns as demonstrated in the following article:
https://www.telerik.com/kendo-angular-ui/components/grid/advanced-features/responsive/
Please check the following example demonstrating such approach:
https://stackblitz.com/edit/angular-hw6f4i?file=app/app.component.ts
Resize the browser viewport in order to observer how the "ProductID" column changes its size dynamically.
Another option is to set the widths of some (or all) columns to be a percentage of the total browser window width. Please check the following example demonstrating such approach:
https://stackblitz.com/edit/angular-hw6f4i-dqsbpy?file=app/app.component.ts
I hope the provided suggestions will shed some more light on this case. Please let us know if any additional information is needed for this case. Thank you in advance.
Regards,
Svetlin
Progress Telerik
Hi Svetlin,
Thank you for the suggestions; it is really appreciated. However, neither of them is doing what I am looking for; I precisely want to force e.g. the ProductId column to not becoming bigger than e.g. 30 while others evenly can.
I am happy that as you mentioned here, you are going to add a new input property to set the max-width of a column when the grid is resizable. My understanding from being resizable, based on this page, is that when the columns can be resized by dragging the edges of the header cell. If it is the case, this new feature will do the job for me :)
Reagrds,
Mojtaba
Hi Mojtaba,
Indeed, the referenced feature request is about a resizable Grid where the columns can be resized by dragging the edges of the header cells. Please cast your vote for the feature, so that we can track the customer demand for it. That will help us to prioritize our development plans for future releases of Kendo UI for Angular. Thank you in advance.
Regards,
Svetlin
Progress Telerik
Hello Shane,
Up to now, the max-width property is not added to our development plans. But I can assure you that we are actively monitoring all feature requests in the Feedback portal, and are frequently reevaluating our roadmap, based on the customer demand and perceived business value of the various requests.
Regards,
Martin
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).
Hi Shane,
Setting min-width or max-width to the Grid columns is not supported as HTML table elements ignore these settings. A possible solution for this use case is to autofit all grid columns and then check their current widths. If a column width is larger than 200px (for example) we can set the width programmatically. The user can still resize the columns by hand:
ngAfterViewInit(){
setTimeout(()=>{
this.resizeColumn();
})
}
public resizeColumn() {
this.gridRef.autoFitColumns();
this.gridRef.columns.toArray().map((col, index) => {
if (col.width > 200) {
this.widths[index] = 200;
} else {
this.widths[index] = col.width;
}
})
}
In addition the following CSS style can be added, in order to show ellipsis (...) after the cell value, instead of separating the cell value on new lines:
.k-grid tbody td {
white-space: nowrap;
line-height: 20px;
padding: 8px 12
}
Here is an example:
https://stackblitz.com/edit/angular-fprxsm?file=app/products.ts
Regards,
Martin
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).