This is a migrated thread and some comments may be shown as answers.

Set max width for columns

10 Answers 3829 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mojtaba
Top achievements
Rank 1
Mojtaba asked on 10 Oct 2019, 11:32 AM

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

Sort by
0
Martin
Telerik team
answered on 14 Oct 2019, 10:20 AM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 25 May 2022, 12:24 PM

what if the desired column should be the last one?
Martin
Telerik team
commented on 27 May 2022, 07:25 AM

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.

0
Mojtaba
Top achievements
Rank 1
answered on 14 Oct 2019, 11:50 AM

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

0
Svet
Telerik team
answered on 16 Oct 2019, 11:11 AM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mojtaba
Top achievements
Rank 1
answered on 16 Oct 2019, 03:57 PM

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

 
0
Svet
Telerik team
answered on 18 Oct 2019, 06:18 AM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Shane
Top achievements
Rank 1
answered on 22 Sep 2020, 08:13 PM
Was this ever added? Needing this as well.
0
Martin
Telerik team
answered on 23 Sep 2020, 04:51 AM

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).

0
Shane
Top achievements
Rank 1
answered on 23 Sep 2020, 01:13 PM
Ok, do you guys have a work around in the mean time? I need to be able to use the autoFitColumns, but set a max width.
0
Mojtaba
Top achievements
Rank 1
answered on 23 Sep 2020, 01:35 PM

Shane,

You can upvote the feature request here, if you haven't done already.

Regards,

Mojtaba

0
Martin
Telerik team
answered on 24 Sep 2020, 11:20 AM

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).

Tags
Grid
Asked by
Mojtaba
Top achievements
Rank 1
Answers by
Martin
Telerik team
Mojtaba
Top achievements
Rank 1
Svet
Telerik team
Shane
Top achievements
Rank 1
Share this question
or