Dynamically resize kendo grid and columns; how?

9 posts, 0 answers
  1. Clive
    Clive avatar
    6 posts
    Member since:
    Nov 2011

    Posted 21 Dec 2012 Link to this post

    Maybe I've looked in the wrong places, but I just can't seem to find an answer to this simple question; I want my grid to behave like a table does in HTML - if there isn't room in a column to show something, I want it to set the width of that column such that it shows all the content, and I want the table to stretch too, so all the columns are visible. 

    All the examples I've seen so far have fixed width columns, and if you put too much text in a column, either word wrap and stretch vertically, or (depending on settings) truncate the field data with ... ; neither of these is acceptable - I want it to stretch the column horizontally to fit. 

    Could someone put together a quick demo in jsBin to show me how please?

    Thanks in advance!

    Clive
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 25 Dec 2012 Link to this post

    Hello Clive,

    The desired behavior can be achieved if you disable Grid scrolling. In this case the table-layout style of the Grid table will be the default one - "auto", and columns will expand and shrink according to the content inside them. The following demo shows such a scenario:

    http://demos.kendoui.com/web/grid/sorting.html

    When Grid scrolling is used, the table layout must be "fixed" and columns with no explicit widths are always equally wide.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Clive
    Clive avatar
    6 posts
    Member since:
    Nov 2011

    Posted 04 Jan 2013 Link to this post

    Thanks for that - is there a way to enable a vertical scrollbar only? I've tried  scrollable: {virtual: true} but that brings back a horizontal scrollbar, and fixed width columns.

    I want a vertical scrollbar over a fixed height grid, but the horizontal size to stretch as it does when you switch scrollable off.... actually, what I *really* want is to define a maximum height for the grid, so if it's less than that, it paints normally without scrollbars, but if it gets bigger than the defined height, a vertical scrollbar comes into play. And ideally, I just want to switch horiizontal scrollbars off. Is that doable?

    Thanks,

    Clive
  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 04 Jan 2013 Link to this post

    Hi Clive,

    The described behavior is possible to achieve.

    Normally, a horizontal scrollbar will show up only if you have explicit widths for all columns. So simply remove at least one of the widths. Of course, this can be done only if there is enough room for the data to fit in the available horizontal space that the Grid occupies. If not, the widthless column will be too narrow or even disappear due to the fixed layout style.

    You can make the Grid have a variable height and apply a vertical scrollbar only if there are too many rows. However, the vertical scrollbar will appear as disabled even when not needed. If this is OK with you, then here is how to do it:

    #GridID  .k-grid-content
    {
        max-height: 300px;
    }

    Grid height must not be set. You can apply the above rule to all Grids if you use the .k-grid CSS class instead of an ID.

    In case you want scrolling together with automatic table layout , then you need to disable Grid scrolling and use a custom scrollable parent for the Grid. In this case you will lose the static Grid headers functionality.

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Deej
    Deej avatar
    14 posts
    Member since:
    Oct 2013

    Posted 18 Oct 2013 Link to this post

    I also want exactly what Clive wants, but I don't want it to paint scrollbars when it's below the maximum height. I'm currently getting this done by destroying and re-creating the grid whenever I need to switch the scrollable behavior, but this is a stupid way to have to do it.

    Also we really need scrollable behavior detached from horizontal autosize behavior. I don't see a good reason why they are bound together.
  6. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 21 Oct 2013 Link to this post

    Hi Deej,

    When the Grid is scrollable, the vertical scrollbar is always visible, even if it is not needed. This simplifies the implementation a lot, improves the performance and avoids possible bugs and glitches, related to "automatic" removal and addition of padding styles to the Grid header area (above the scrollbar).

    Grid scrolling requires fixed table layout, because the scrolling feature uses two table elements - one for the header area and one for the data area. Naturally, they must have identical column widths. Fixed table layout is the only way to ensure this. The fixed layout, in turn, disables browser auto-sizing behavior for the columns, depending on their content.

    Theoretically, you can disable Grid scrolling and use custom scrolling for a Grid ancestor, but you will lose the static headers.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Deej
    Deej avatar
    14 posts
    Member since:
    Oct 2013

    Posted 21 Oct 2013 Link to this post

    Thanks
  8. Fernanda
    Fernanda avatar
    1 posts
    Member since:
    Mar 2016

    Posted 05 Apr 2016 in reply to Dimo Link to this post

    Hello Dimo, i know this is quite old but i'm trying the same thing as Clive but the columns with the grid scrolling disabled have the same width and i can't accomplish the auto width to make the col width narrow or wide unless i add a fixed width.
  9. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 06 Apr 2016 Link to this post

    Hi Fernanda,

    Please check the following resources and let me know if further questions arise.

    Automatic layout and column widths
    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/auto-layout-grid

    Grid width
    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#width
     
    Grid column widths
    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns
     
    Grid scrolling
    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#scrolling

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top