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

【问题标题】：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 或更早的旧版本中工作。