Grid Column Width Auto Size and Scrollable

[Victor]

I know from the documentation and other threads that if I want the columns in the grid to auto size, then I have to set "scrollable" to false.  Setting scrollable to false gives me the desired effect in terms on column width, but having the grid scrollable is also a requirement in my case (the column headers must stay visible).

My questions are:

1. Is there a way to auto size the columns and keep the grid scrollable?
2. If not, are there plans to add this feature in the future (column auto size and scrollable at the same time)?

Regards,
Victor

[Iliana Dyankova]

Hello Victor,

Basically auto adjustable columns and Grid scrolling are mutually exclusive behaviors. As a possible workaround I can suggest you wrapping the non-scrollable Grid in additional scrollable <div> element. For example:

<div id="gridWrapp" class="k-content">
    <div id="grid"></div>
</div>

<style>
#gridWrapp{
    overflow: auto;
}
</style>

   Regards,
Iliana Nikolova
Telerik

[Deej]

Why are they mutually exclusive? Are there any plans to fix this?

[Dimo]

Hi Deej,

I have explained here:

http://www.kendoui.com/forums/kendo-ui-web/grid/dynamically-resize-kendo-grid-and-columns-how.aspx#ZVZ-vlMhzEaRzJzCeoWANg

Here is some relevant documentation as well:

http://docs.kendoui.com/getting-started/web/grid/walkthrough#column-widths

Regards,
Dimo
Telerik

[David]

<style>
.grid-scroll-container {
    overflow: auto;
}
</style>

<div id="grid"></div>

<script>
    $('#grid').kendoGrid();

    $('#grid').contents().wrap('<div class="grid-scroll-container"></div>');
</script>

I found this one to work better on mobile

[Jon]

1. These options do not keep the header in place and the header will scroll inside the div.  This is not desireable.

2.  You can get the same functionality by just setting a max height and overfloaw auto for on the css so using javascript is completely unessarry.  

 

My question is why the heck does scrollable have any effect on the width of the grid?  Seems silly 

[Viktor Tachev]

Hi Jon,

 

The scrollable option does not change the width of the Grid itself. However, depending on the setting the width of the columns can be changed by the browser.

If you would like more information on Grid scrolling and how column widths are determined you would find the resources below interesting.

https://docs.telerik.com/kendo-ui/controls/data-management/grid/scrolling/overview

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

 

Regards, Viktor Tachev
Progress Telerik