Grid column resizing on window resize

8 posts, 0 answers
  1. Quotient
    Quotient avatar
    15 posts
    Member since:
    Sep 2013

    Posted 17 Apr 2014 Link to this post

    There have been few discussions on the topic of column minimum widths. And the answers I found so far can be summarized to this:
    1. Kendo UI grid does not support min-width for the columns;
    2. Developer can set min-width css on the whole grid element;
    3. A js function can capture event when user resizes individual column manually and prevent user to go under given width. 

    In a most user friendly way the column configuration should have taken column width in % and min-width. 
    Are there any plans to implement this feature?

    Is there a known function which can work as window.onresize and resize grid columns proportionally with given column min widths? Can min widths be added to columns configuration and then accessed by this function?

    Thanks!
  2.
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 21 Apr 2014 Link to this post

    Hello,

    There is a columnResize event that the Kendo UI Grid fires every time the user tries to resize the width of the column. In this event you can determine what is the current width of the column and according to the preset width resize the column. Please check the following example and let me know if it helps:

    http://jsbin.com/bitop/1/edit

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Ron
    Ron avatar
    75 posts
    Member since:
    Oct 2010

    Posted 11 Sep 2014 in reply to Kiril Nikolov Link to this post

    Facing the same problem, I have tried your proposed solution Kiril. Unfortunately this bit of javascripting manages to CRASH Internet Explorer 11. Just try your own example on IE11 and you'll see that resizing the columns will crash IE11. Furthermore on older IE version, the solution just doesn't work. So I am in dire need of a working solution for IE.

    Thanks, 
    Ron
  7. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 12 Sep 2014 Link to this post

    Hello Ron,

    The IE crash seems to result from the jQuery's attempts to obtain the width of each col element, but this happens on the second column resize, before the columnResize event had been fired. This is strange to say the least.

    You can check this code library entry that uses a different implementation:

    http://www.telerik.com/support/code-library/apply-minimum-column-width-during-column-resize

    Generally, there is no single best approach, so choose the algorithm and user experience that suits you most (i.e. prevent the user from over-resizing during dragging, or restoring some predefined min/max column width after dragging).

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Ron
    Ron avatar
    75 posts
    Member since:
    Oct 2010

    Posted 12 Sep 2014 in reply to Dimo Link to this post

    I managed to implement a working and non-crashing solution by trying a similar approach as the post you linked. Thanks for that.

    Having said that I do think that support for a minimum width for grid columns would be nice. Or even a fixed size or maximum size.
  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 16 Sep 2014 Link to this post

    Hi Ron,

    Thanks for your feedback.

    I will forward it to the people responsible for the implementation of the Kendo UI Grid, so they will consider it for a future release.

    In case you have any further questions, please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Barry P
    Barry P avatar
    20 posts
    Member since:
    Aug 2006

    Posted 18 Aug 2018 in reply to Kiril Nikolov Link to this post

    It seems like this is critical functionality that is missing.

    In my scenario, I have certain columns that I set to a fixed width due to their content.  I expect the other columns to fill the remaining space.  However, when the grid gets narrow, those other columns disappear and I have to write some JavaScript to implement a minimum width for those columns.  It would be way easier to just be able to specify a minimum width for when the page itself resizes.

  14.
  15. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 20 Aug 2018 Link to this post

    Hi Barry,

    I agree this is a nice-to-have feature, but rather tricky to implement so that it works well in terms of practicality, user experience and performance.

    Have you tried setting a min-width style to the Grid table? This is an easy and script-less approach to achieve always-visible width-less columns, which usually does the job. I hope this technique will fit your use case.

    The following page provides more information and sample code snippets:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/columns/widths

    On a side note, even if your scenario is complex and static min-width may not work well, you can consider applying variable min-width to the tables programmatically, instead of setting different widths to all columns.

    Regards,
    Dimo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top