自动调整网格列的宽度以显示所有数据

Question

当显示所有列时，我想自动调整宽度并在kendo-ui网格中显示滚动条，并使用水平滚动条。

如何使Kendo UI网格的列自动适合其宽度以容纳其内容？

    $("#grid").kendoGrid({
    toolbar: ["excel", "pdf"],
    excel: {
        fileName: "Kendo UI Grid Export.xlsx",
        filterable: true,
        allPages: true,
    },
    pdf: {
        allPages: true,
        avoidLinks: true,
        paperSize: "A4",
        margin: {
            top: "2cm",
            left: "1cm",
            right: "1cm",
            bottom: "1cm"
        },
        landscape: true,
        repeatHeaders: true,
        template: $("#page-template").html(),
        scale: 0.8
    },
    dataSource: {
        type: "odata",
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
    },
    columnMenu: true,
    height: 617,
    pageable: {
        refresh: true,
        buttonCount: 5,
        pageSizes: [10, 20, 50, 100, 500]
    },
    persistSelection: true,
    sortable: {
        mode: "multiple",
        allowUnsort: true,
        showIndexes: true
    },
    filterable: {
        mode: "row"
    },
    groupable: true,
    reorderable: true,
    resizable: true
});

Answer 1

解决方案

• 订阅dataBound事件。
• 使用autoFitColumn方法。

如果只需要将列的选中属性设置为true，则使用dataBound事件。

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

    <script>
      $(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() {
            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"
          }
         ]
        });
      });
    </script>
  </div>
  <style>
    #grid>table
    {
      table-layout: fixed;
    }
  </style>