剑道网格扩展到适合所有列

Question

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

当Kendo渲染网格时，每列（和列标题）都带有省略号（...），表示内容已被截断。

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

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

有没有一种方法可以做到这一点，所以所有数据都是可读的？（即，格式>列>自动调整选择在Excel中的工作方式。）

我试过了

1. 使用更改TD样式whitespace: nowrap;，但这只会导致文本重叠到每一列中
2. 设置gridto resizeable:true并进行调用，例如grid.autoFitColumn(1);-但所有这些都是减小列1的宽度以更好地容纳网格中的其他列

Answer 1

根据文档，最好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>