Set max width for columns

6 posts, 0 answers
  1. Mojtaba
    Mojtaba  avatar
    31 posts
    Member since:
    Oct 2018

    Posted 10 Oct Link to this post

    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

  2. Martin
    Admin
    Martin avatar
    20 posts

    Posted 14 Oct Link to this post

    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.
  3. Mojtaba
    Mojtaba  avatar
    31 posts
    Member since:
    Oct 2018

    Posted 14 Oct in reply to Martin Link to this post

    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

  4. Svetlin
    Admin
    Svetlin avatar
    247 posts

    Posted 16 Oct Link to this post

    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.
  5. Mojtaba
    Mojtaba  avatar
    31 posts
    Member since:
    Oct 2018

    Posted 16 Oct in reply to Svetlin Link to this post

    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

     
  6. Svetlin
    Admin
    Svetlin avatar
    247 posts

    Posted 18 Oct Link to this post

    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.
Back to Top