Grid Column Width Auto Size and Scrollable

2 Answers 2070 Views
Grid
Victor
Top achievements
Rank 1
Victor asked on 28 Jun 2013, 01:27 PM
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

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 02 Jul 2013, 10:41 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Deej
Top achievements
Rank 1
commented on 18 Oct 2013, 06:12 PM

Why are they mutually exclusive? Are there any plans to fix this?
Dimo
Telerik team
commented on 21 Oct 2013, 06:42 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
answered on 04 Feb 2015, 06:13 PM
<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
Top achievements
Rank 1
commented on 13 Aug 2019, 04:09 PM

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
Telerik team
commented on 15 Aug 2019, 07:55 AM

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

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.
Tags
Grid
Asked by
Victor
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
David
Top achievements
Rank 1
Share this question
or