How to set the Kendo UI Grid Column Width to Auto

[Joseph]

Hi,

I would like to set Kendo UI MVC Grid Column width to auto size.

Anybody can please help me in this.

--Satish

[Dimo]

Hi Satish,

Automatic column sizing is possible with disabled Grid scrolling. This is explained in our documentation at:

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

Regards,
Dimo
Telerik

 

 

[Ryan]

@Dimo - 

 

Bad anchor ( #column-widths ) in your link .

[Dimo]

Hi Ryan,

Indeed, the referenced content now resides on a different page. The link is now correct, thanks for pointing this out.

Regards,
Dimo
Telerik by Progress

[Dominik]

here is work around that works with scrolling enabled:

 

dataBound: function(){
                        var grid = $("#grid").data("kendoGrid");
                        for (var i = 0; i < grid.columns.length; i++) {
                            grid.autoFitColumn(i);
                        }
                    }

[Gordon]

Hi Dominik,

your example works nice, thanks!

I need a way to limit the maximum width.

Tried to use:

css colgroup col {   max-width: 200px; }

and a second loop to downsize all columns after autoFitColumn but this will make the other cols larger by distributing the regained space from the shrinked one...

 

Cheers,

Gordon

 

[Dominik]

I 'm not sure exactly what you're trying to achieve...

There isn't an kendo api to set the column width but you can set the column width when you set grid options. So you could get the grid options manipulate the column width values of the columns in the options object and set the grid options. The behavior of redistributing the regained space can be avoided by removing the width of the last colgroup col (from both tables if your grid is scrollable), but you would only want to do this if there isn't any overflow (i.e if there wasn't a scrollbar present). If you do this and notice the grid header and cols are out of sync move the scrollbar a little bit programatically. Also if you plan on calling autoFitColumn and using the kendo resize event you may want to unbind from the resize event and rebind after the loop completes.

The best way to have auto column widths is to make the grid non scrollable. If you are expecting overflow put the grid in a div with overflow set to auto (<div style="overflow:auto; border: 1px solid black"><div id="grid"></div></div> <div id="pager"></div>) and do not render the pager inline with the grid options render it as a separate widget. Also, set the grid's border-style to "none". You will also need to toggle table-layout between fixed and auto. You want fixed if there is overflow and auto if there is no overflow. (toggle this on data bound and on window resize)

 

[Scott]

Thank you Dominik for sharing this snippet.  This has saved me a huge amount of time.  One thing I'd add is that the event handler function context is set to the widget instance in the dataBound event, so you can access the grid instance directly via the "this" keyword:

dataBound: function (e) {
    for (var i = 0; i < this.columns.length; i++) {
 this.autoFitColumn(i);<br>}<br>},

[Scott]

My code block got messed up.  Should have been:

dataBound: function (e) {
    for (var i = 0; i < this.columns.length; i++) {
        this.autoFitColumn(i);
    }
}

 

[Dimo]

Hi all,

Iterating and autofitting columns in dataBound is indeed a valid approach. Just please note that it may not perform well with a large number of columns, combined with a large page size. In such use cases, consider auto-fitting specific columns only, while having predefined fixed widths for the rest of the columns.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-autoFitColumn

Regards,
Dimo
Progress Telerik

[Dan]

Hi Dimo,

I have a grid with column with buttons on it that I would like it to be autofit. How can I get the index of that column to autofit only that column? I should mention that my grid has reorder on true so the buttons column can be on any position even though it starts on the first one.

[Dimo]

Hello Dan,

Generally, a button column is a good candidate for a fixed width, unless the number of buttons or their text labels change.

In order to reference the column in your case, you can use the columns field of the Grid, iterate the columns and find out which one you need, based on some column settings, which are predictable.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/fields/columns

Another approach is to configure the button column with a custom header cell attribute and use it to locate the header cell and its index without iterating the column objects.

Here is an example, which demonstrates both options.

https://dojo.telerik.com/ISeGaPEd

Regards,
Dimo
Progress Telerik

[Dan]

Hi Dimo,

I am trying to use a fixed width but it does not work. I have got this width "calc(2.25rem + 1.32em + 6px)" and it works on IE but not on chrome. This is the reason I am hoping that using the resize it might work regardless of browser or font size or zoom.

[Dimo]

Hello Dan,

The provided expression works on my side in both IE and Chrome. However, it seems to me that the resulting width is too small and the buttons will not fit, unless they are tiny. Try with larger numbers.

On my Dojo 2.25rem + 1.32em + 6px = 29px + 17px + 6px = 52px.

Regards,
Dimo
Progress Telerik

[Dan]

Hi Dimo,

I am not using the 52px in the width. I am using exactly the "calc(2.25rem + 1.32em + 6px)". Also what I am testing is a column that has 3 buttons and the formula does not seem to respect the number of buttons

[Dimo]

Hello Dan,

Yes, I understood you correctly that you are using the calc() expression. This is what I tested with as well. What I meant is that the expression evaluates to 52px by the browser (at least in my test page), which is a too low number of most kinds of meaningful content.

Here is an updated Dojo with the expression in action:

https://dojo.telerik.com/ISeGaPEd/2

(width: "calc(8.25rem + 6.32em + 6px)")

As far as I can see, the Grid works correctly, i.e. it renders the width style, according to the column configuration. From there, it is the browser's job to apply it consistently, which also seems to be happening.

Regards,
Dimo
Progress Telerik

[Dan]

Hi Dimo,

After further investigation I have found the culprit. I was adding a left border to the td because the grid did not have any border.

After changing the grid to have border again and remove the border from td it worked as expected.

[Dimo]

Hello Dan,

Good, I am glad that you have managed to achieve the desired behavior. Thank you for the follow-up.

Regards,
Dimo
Progress Telerik

[Michael]

This thread is quite old but is still coming up near the top of search engine results for Kendo grid column widths -- for any new readers, check out this newer setting that appears to have been a more recent (late 2019 or early 2020) addition to the Grid behavior.

https://demos.telerik.com/aspnet-mvc/grid/column-virtualization