如何使剑道网格列自动宽度

Posted 2023-05-07

【中文标题】如何使剑道网格列自动宽度

【英文标题】：How to make Kendo Grid Column auto Width

【发布时间】：2014-10-26 05:17:43

【问题描述】：

我使用了 jQuery 插件数据表，如果我们不指定 Grid 的列宽，它会自动调整列的宽度来获取标题或数据内容的长度。

现在我想在 Kendo Grid 中使用相同的功能，但是，除了固定 Grid 包装样式并为所有列设置 col 宽度 css 之外，我找不到它，这使得小长度字段也占用大空间。

所以我的问题是如何使 Kendo Grid 列（通常我有很多字段，并且它是可滚动的）自动宽度或不同长度（我不希望手动设置每列的宽度）。

谢谢

【参考方案1】：

你必须在定义列时设置宽度，如果你不指定宽度，那么它将采用内容的自动宽度。 看看这份文档 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 
   ],

如果您需要更多处理剑道宽度的方法，请查看http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

【参考方案2】：

将可滚动设置为 false 应该可以解决问题：

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

【讨论】：

因为如果你放 "scrollable:false" ，如果你的总列宽度大于屏幕宽度，当你调整大小时出现的水平滚动将不会出现，并且孩子将被强制适应进入父母。因此，“scrollable:false”修改了剑道网格的构建方式。不放的话，父宽度按子宽度计算。

【参考方案3】：

我也用 dataBound 解决了这个问题：

我关于数据绑定中 kendo 自动调整列的问题

        <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,

你可以在 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);
            
        ,

【讨论】：

感谢您的建议，但从 2015 年第一季度开始提供。

@federico 嵌入一行配置？没有js功能？怎么样？

不幸的是，没有简单的方法，您需要从每列的 X 表中获取最大长度，如 select max(len(col1)) as len1，然后为每个列预设宽度不知何故，我仍在研究 Pixels，但它甚至可以在 2014 或更早的旧版本中工作。