Question

我使用了jQuery插件数据表，如果我们不指定网格的列宽，它将自动调整列的大小以获取标题或数据内容长度。

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

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

由于

Answer 1

您必须在定义列时设置宽度，如果您没有指定宽度，那么它将采用内容的自动宽度。 查看此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 
   ],

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

Answer 2

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

$('a').click(e => {
    this.pop($(e.target));
});

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

如何使Kendo Grid Column自动宽度

3 个答案: