Question

我有一个包含20列的Kendo UI网格，所有这些都有文本数据。

当Kendo呈现网格时，每列（和列标题）都有一个省略号（...），表示内容被截断。

我在这里创建了一个例子：http://dojo.telerik.com/iRIqU

似乎网格宽度适应其所在容器的宽度 - 而不是强制显示所有数据所需的宽度，并水平滚动。

有没有办法实现这一点，所以所有数据都是可读的？（即格式＆gt;列＆gt; AutoFit选择在Excel中的工作方式。）

我已经尝试了

使用whitespace: nowrap;更改TD样式，但这只会导致文本重叠到每列
将grid设置为resizeable:true并调用，例如grid.autoFitColumn(1); - 但所有这一切都是 reduce 第1列的宽度，以便更好地适应网格中的其他列

Answer 1

根据documentation，最好只在网格数据绑定后调用grid.autoFitColumn。

还要注意：

一次自动安装所有列是一项资源密集型操作不推荐。

请参阅我的固定示例：http://dojo.telerik.com/iRIqU/2

$(document).ready(function() {
  var grid = $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      schema: {
        model: {
          fields: {
            OrderID: {
              type: "number"
            },
            ShipCountry: {
              type: "string"
            },
            ShipCity: {
              type: "string"
            },
            ShipName: {
              type: "string"
            },
            OrderDate: {
              type: "date"
            },
            ShippedDate: {
              type: "date"
            }
          }
        }
      },
      pageSize: 15
    },
    height: 550,
    sortable: true,
    resizable: true,
    pageable: true,
    dataBound: function(e) {
      for (var i = 0; i < this.columns.length; i++) {
        this.autoFitColumn(i);
      }
    },
    columns: [{
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MM/dd/yyyy}"
      },
      {
        field: "ShipCountry",
        title: "Ship Country"
      },
      {
        field: "ShipCity",
        title: "Ship City"
      },
      {
        field: "ShipName",
        title: "Ship Name"
      },
      {
        field: "ShippedDate",
        title: "Shipped Date",
        format: "{0:MM/dd/yyyy}"
      },
      {
        field: "OrderID",
        title: "ID"
      }, {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MM/dd/yyyy}"
      },
      {
        field: "ShipCountry",
        title: "Ship Country"
      },
      {
        field: "ShipCity",
        title: "Ship City"
      },
      {
        field: "ShipName",
        title: "Ship Name"
      },
      {
        field: "ShippedDate",
        title: "Shipped Date",
        format: "{0:MM/dd/yyyy}"
      },
      {
        field: "OrderID",
        title: "ID"
      }
    ]
  });

  //grid.autoResizeColumn(1);
  //grid.autoResizeColumn(2);
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

<div id="example">
  <div id="grid"></div>
</div>

kendo网格扩展以适合所有列

1 个答案: