How to make Kendo Grid Column auto Width

12
votes

I used jQuery plugin datatables, which will auto width columns to fetch the title or data content length if we don't specify the column width of the Grid.

Now I want the same function in Kendo Grid, however, I cannot find it except make Grid wrapper style fixed and set a col width css for all columns, which make the small length field also take big space.

So my question is how to make the Kendo Grid column (usually I have many fields, and it is scroll-able) auto width or in different length (and I don't expect to set width for each column manually).

Thanks

3
kendo-grid

3 Answers

11
votes

You kind of have to set the width when you define the columns , if you don't specify the width then it will take the auto-width of the content. Take a look at this DOC http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.width

columns: [
     { field: "name", width: "200px" },
     { field: "tel", width: "10%" }, // this will set width in % , good for responsive site
     { field: "age" } // this will auto set the width of the content 
   ],

If you need more ways to handle Kendo width, look at http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

7
votes

Setting scrollable to false should do the trick:

$('#grid').kendoGrid({
  dataSource: {
     data: data
  },
  scrollable: false,
  resizable: true
});
4
votes

i'm also solve this issue in angular with dataBound :

my issue about kendo auto fit columns in databound

        <kendo-grid id="grid" options="mainGridOptions">
        </kendo-grid>



        dataBound: function(){
            var grid = $("#grid").data("kendoGrid");
            for (var i = 0; i < grid.columns.length; i++) {
                grid.autoFitColumn(i);
            }
        },
        dataSource: $scope.data,

you can do it in jquery:

$('#grid').kendoGrid({
  dataSource: {
     data: data
  },dataBound: function(){
            var grid = $("#grid").data("kendoGrid");
            for (var i = 0; i < grid.columns.length; i++) {
                grid.autoFitColumn(i);
            }
        },