KendoUI grid auto fit columns up to min/max width

Question

I'm using the autoFitColumns method as described here:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/#toc-auto-fitting-the-content

But in some cases the method is sizing the columns too small (for example when there are only 1-2 columns in the grid) or too big (when the column contains long text and there's no need to actually show all of it).

Is there a way to set max/min width when auto sizing?

ezanker ezanker · Accepted Answer · 2020-01-21T15:43:51

This is not built in to the grid as far as I know; however, you can do this by updating column options:

var FitCols = function(){
  var grid = $("#grid").data("kendoGrid");
  if (grid) {
    //copy current column options from the grid
    var newOptions = $.extend({}, grid.getOptions().columns);               
    var minW = 80;  //minimum column width
    var maxW = 300; //maximum column width
    for (var i = 0; i < grid.columns.length; i++) {
      grid.autoFitColumn(i);
      //after autofit, limit to max and min width
      var curW = grid.columns[i].width;
      var actualW = Math.max(curW, minW); //min check
      actualW = Math.min(actualW, maxW); //max check
      newOptions[i].width = actualW + "px";
    }    
    grid.setOptions({ columns:  newOptions });
  }        
};

This code gets the column option from the grid before autosizing. Then iterate each column, call autosize, check the new size against your max and min, write the new size into the copied column options, finally write these options back to the grid.

Here is a dojo demo: http://dojo.telerik.com/@ezanker/EFiVoNiP

Keep in mind that if you have many columns, the autosizing gets exponentially slower...

KendoUI grid auto fit columns up to min/max width

1 Answers