When using autoFitColumn all other columns are reduced to their width size instead of filling the available space

[Noah]

The autoFitColum method sizes the chosen column to the correct size, but it also reduces all other columns to their width property as shown below. 

I created some examples to show what I'm talking about by editing autoFitColumn - API Reference - Kendo UI Grid | Kendo UI for jQuery (telerik.com)

This behavior works out in cases where the auto fit column exceeds the grid width (see figure 1), but not in cases where the the data is Smaller than the grid (see figure 2). 

The desired behavior, for me, would be for the autoFitColumn method to act like setting the width manually (see figure 3 or dojo example). I need scrollable to be true and grid width to be auto to work on any screen width. Allowing the rows to text-wrap doesn't work for scrolling large data tables.

Is figure 2 the intended behavior, and is there a way to achieve my desired behavior?

 

<div id="grid"></div><script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", width: 100 },
    { field: "age", width : 50 },
    { field: "quote" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, quote: "I like Pi." },
      { name: "John Doe", age: 33, quote: "The FitnessGram™ Pacer Test ... ding" }
  ],
  scrollable: true,
  width: 'auto'
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("quote");
</script>
figure 1: behavior of autoFitColumn if data is longer than grid is wide.

<div id="grid"></div><script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", width: 100 },
    { field: "age", width : 50 },
    { field: "quote", }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, quote: "I like Pi." },
      { name: "John Doe", age: 33, quote: "I like Pi too." }
  ],
  scrollable: true,
  width: 'auto'
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("quote");
</script>
firuge 2: behavior of autoFitColumn if data is shorter than grid is wide

<div id="grid"></div><hr/><div id="grid2"></div><script>
  
$("#grid").kendoGrid({
  columns: [
    { field: "name", width: 100 },
    { field: "age", width : 50 },
    { field: "quote", width : 3272 } //this width should be set by autoFitColumn instead of manually
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, quote: "I like Pi." },
      { name: "John Doe", age: 33, quote: "The FitnessGram™ Pacer Test ... ding" }
  ],
  scrollable: true,
  width: 'auto'
});
  
  
$("#grid2").kendoGrid({
  columns: [
    { field: "name", width: 100 },
    { field: "age", width : 50 },
    { field: "quote", width: 93 }//this width should be set by autoFitColumn instead of manually
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, quote: "I like Pi." },
      { name: "John Doe", age: 33, quote: "I like Pi too" }
  ],
  scrollable: true,
  width: 'auto'
});
  //I left this code in a comment to make switching back and forth between my desired and actual behavior easier
/*var grid = $("#grid").data("kendoGrid");
var grid2 = $("#grid2").data("kendoGrid");
grid.autoFitColumn("quote");
grid2.autoFitColumn("quote");*/
  
</script>
figure 3: desired visual result, but the width should be set using autoFitColumn, not manualy
  

 

[Neli]

Hi Noah,

The autoFitColumn applies the minimum possible width for the specified column. I would suggest you use the following style in order to adjust the width of the Grid:

  <style>
    #grid {
        display: inline-block;
        width: auto;
    }
 
    #grid table {
        width: auto;
    }
</style>

Here you will find a Dojo example based on one of the provided snippets.

You could also take a look at the following articles:

- https://docs.telerik.com/kendo-ui/knowledge-base/grid-autofit-all-columns-width

- https://docs.telerik.com/kendo-ui/controls/data-management/grid/columns/widths

I hope you will find the provided information helpful.

Regards,
Neli
Progress Telerik