如何使Kendo Grid Column自动宽度

Question

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

现在我想在Kendo Grid中使用相同的功能,但是,除了固定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 
   ],

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

Answer 2

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

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

Answer 3

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

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

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