Dynamically adjust width of column in Kendo ui grid

3
votes

I have added columns dynamically in the kendo ui grid. For first column I have specified width as 35 and for other columns I have specified width as 100. Now what happens is that there are columns with much data, but because of column width (100) I specified the data is getting displayed in new row.

What I want is I want the column to extend automatically to width as per data.

I tried by removing the width which I set as 100. But that didn't help.

Please help me on this.

3
kendo-uikendo-grid

3 Answers

1
votes

if you set 'scrollable:true' while setting up kendo grid, you can see horizontal scroll bar.. you problem can be solved..

$("#grid").kendoGrid({
    scrollable:true,
    columns: columns
});

this jsbin might help you..

0
votes

I know it's a bit late but I was in a similar situation and I had to set the column width to "auto" and make the grid non-scrollable

.Width("auto")

Please see also for further info on this

0
votes

Try this

var options = $("#grid").data("kendoGrid").getOptions();
for (i = 0; i < options.columns.length; i++) 
{
        options.columns[i].width = "100px";
        if(i==4) //I can only filter by index in my case
        {
          options.columns[i].width = "100px";
          options.columns[i].title = "100px";
          options.columns[i].filterable = "100px";
        }
}
$("#grid").data("kendoGrid").setOptions(options);