This is a migrated thread and some comments may be shown as answers.
grid column auto-expand to show all data
2 Answers 62 Views
This is a migrated thread and some comments may be shown as answers.
shiv
Top achievements
Rank 1
shiv asked on 17 Jan 2018, 02:13 PM

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

http://dojo.telerik.com/iRIqU

 

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

2 Answers, 1 is accepted

Sort by
0
Eduardo Serra
Telerik team
answered on 17 Jan 2018, 04:40 PM
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++) {
      this.autoFitColumn(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!

Regards,
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.
0
shiv
Top achievements
Rank 1
answered on 17 Jan 2018, 10:21 PM

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

Thanks for the help

Tags
Grid
Asked by
shiv
Top achievements
Rank 1
Answers by
Eduardo Serra
Telerik team
shiv
Top achievements
Rank 1
Share this question
or