How to set the Kendo UI Grid Column Width to Auto

7 posts, 0 answers
  1. Joseph
    Joseph avatar
    11 posts
    Member since:
    Mar 2014

    Posted 09 May 2014 Link to this post


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

    Anybody can please help me in this.

  2. Dimo
    Dimo avatar
    8406 posts

    Posted 10 May 2014 Link to this post

    Hi Satish,

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


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. Dominik
    Dominik avatar
    28 posts
    Member since:
    May 2015

    Posted 16 Oct 2015 in reply to Dimo Link to this post

    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++) {

  4. Gordon
    Gordon avatar
    6 posts
    Member since:
    Aug 2014

    Posted 17 Dec 2015 in reply to Dominik Link to this post

    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...





  5. Dominik
    Dominik avatar
    28 posts
    Member since:
    May 2015

    Posted 17 Dec 2015 in reply to Gordon Link to this post

    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)


  6. Ryan
    Ryan avatar
    15 posts
    Member since:
    Jun 2013

    Posted 10 Mar in reply to Dimo Link to this post

    @Dimo - 


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

  7. Dimo
    Dimo avatar
    8406 posts

    Posted 10 Mar Link to this post

    Hi Ryan,

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

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top