Dynamically resize kendo grid and columns; how?

[Clive]

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

[Dimo]

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

[Clive]

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

[Dimo]

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

[Deej]

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.

[Dimo]

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

[Deej]

Thanks

[Fernanda]

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.

[Dimo]

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