KendoUI网格自动适合最大/最小宽度的列

问题描述 投票:0回答:1

我正在使用如下所述的autoFitColumns方法:

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

但是在某些情况下,该方法将列的大小设置为太小(例如,当网格中只有1-2列时)或太大(当列包含长文本并且不需要实际显示所有列时) 。

自动调整大小时是否可以设置最大/最小宽度?

kendo-ui kendo-grid kendo-ui-angular2
1个回答
0
投票

据我所知,这不是内置于网格中的;但是,您可以通过更新列选项来做到这一点:

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 });
  }        
};  

此代码在自动调整大小之前从网格获取列选项。然后迭代每个列,调用autosize,对照您的max和min检查新大小,将新大小写入复制的列选项中,最后将这些选项写回到网格中。

这是一个dojo演示:http://dojo.telerik.com/@ezanker/EFiVoNiP

请记住,如果您有很多列,则自动调整的速度将成倍降低...

© www.soinside.com 2019 - 2024. All rights reserved.