How to set the Kendo UI Grid Column Width to Auto

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

    Posted 09 May 2014 Link to this post

    Hi,

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

    Anybody can please help me in this.

    --Satish
  2. Dimo
    Admin
    Dimo avatar
    8333 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:

    http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

    Regards,
    Dimo
    Telerik
     

    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. UI for ASP.NET MVC is VS 2017 Ready
  4. 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++) {
                                grid.autoFitColumn(i);
                            }
                        }

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

     

    Cheers,

    Gordon

     

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

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready