代码之家 › 专栏 › 技术社区 › Black

剑道网格展开以适应所有列

kendo-grid css

Black · 技术社区 · 8 年前

我有一个剑道UI网格,有20列,所有列都有文本数据。

Kendo渲染网格时,每列(和列标题)都有一个省略号(…)指示内容被截断。

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

网格宽度似乎与所在容器的宽度相适应,而不是强制使用必要的宽度来显示所有数据并水平滚动。

有没有办法做到这一点,使所有数据都可读?(即Excel中“格式”>“列”>“自动调整选择”的工作方式。)

我试过了

使用更改TD样式 whitespace: nowrap; ,但这只会导致文本在每列中重叠
设置 grid 到 resizeable:true 和呼叫,例如。 grid.autoFitColumn(1); -但这一切都是减少列1的宽度,以便更好地容纳网格中的其他列

1 回复 | 直到 8 年前

Roman Koliada 8 年前

根据 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>