grid column auto-expand to show all data

3 posts, 0 answers
  1. shiv
    shiv avatar
    2 posts
    Member since:
    Apr 2014

    Posted 17 Jan 2018 Link to this post

    I'm trying to configure this grid so that all the columns auto-expand enough to show all the data in every column.

    Regardless of what I've tried, it seems that the table stays the same width with no scrolling, and calling autoFitColumn just *shrinks* that column to better accommodate the others (vs the way Format > Column > AutoFit Selection works in Excel.)


    Can someone advise how to get the columns to auto-expand?

  2. Eduardo Serra
    Eduardo Serra avatar
    119 posts

    Posted 17 Jan 2018 Link to this post

    Hello Shiv,

    In order to learn more about how the widths of Kendo UI Grid columns are calculated, take a look at the following section in our documentation.

    One approach that might be of help to you would be to autofit all columns during the dataBound event:

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

    I have modified the sample you shared to demonstrate this approach; you can take a look at it here. Please note that this approach 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.

    I hope this helps!

    Eduardo Serra
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. shiv
    shiv avatar
    2 posts
    Member since:
    Apr 2014

    Posted 17 Jan 2018 in reply to Eduardo Serra Link to this post

    Ah, I see - my problem was that I was calling autoFitColumn *before* the data was rendered

    Thanks for the help

Back to Top