如何在 Kendo Grid 中设置列宽答案

【问题标题】：How to set column width in Kendo Grid如何在 Kendo Grid 中设置列宽
【发布时间】：2017-07-04 16:51:06
【问题描述】：

我必须在没有列标题的 Kendo Grid 中设置一些固定的列宽。这意味着我使用单列“foo_data”获得与下面类似的数据，并隐藏此列标题并按原样显示在 kendo Grid 中。网格中的列和行是动态的，即在下面的示例中，有 9 列和 6 行，有时我可能会得到 3 列和 5 行。我正在使用 Kendo Ui、Angularjs 和引导框架。我希望在网格中 列之间有更多空间。我该如何实现？任何帮助将不胜感激。

var foo_data= [{"1 AAA BBB CCC 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999"},
               "2  AAA BBB CCC 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999"},
               "3  AAA BBB CCC 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999"},
               "4  AAA BBB CCC 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999"},
               "5  AAA BBB CCC 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999"},
               "6  AAA BBB CCC 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999"}];

在 Kendo Grid 中隐藏列标题：

columns: [{
    field: "foo_data",
    headerAttributes: {
           style: "display; none"
    }

【问题讨论】：

如果你觉得答案对你有帮助，别忘了投票或接受答案
据我了解，您的数据实际上是一个只有一维的数组（而不是二维，这在数据网格中很常见），其中每个条目代表一整行。此外，在将数据呈现给剑道网格之前，您无论如何都不会更改结构），这意味着您的网格实际上只有一列！因此，您真正需要的只是网格每一行中的一个单元格内的数据块之间的更多空间。我说对了吗？

标签： angularjs css kendo-ui kendo-grid bootstrap-4

【解决方案1】：

您可以在剑道网格的列数组中使用width。看下面的代码。

 columns: [{
        field: "foo_data",
        headerAttributes: {
               style: "display; none"
        },
        width: 175

width 以像素为单位。它会将列宽增加到 175 像素

【讨论】：

我不确定你们是否理解我的问题，正如我在原始问题中所说的那样，我将所有数据（非结构化）放在一个列中。换句话说，我将所有数据放在一个单列，我想要列之间的一些空间。我已经知道上述答案，但我的上下文不同。

【解决方案2】：

您可以按照下面的代码进行设置。更多信息请参考kendo UI documentation (Grid / AngularJS)

 $scope.mainGridOptions = {
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                },
                pageSize: 5,
                serverPaging: true,
                serverSorting: true
            },
            sortable: true,
            pageable: true,
            dataBound: function() {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
            columns: [{
                field: "FirstName",
                title: "First Name",
                width: "120px"
                },{
                field: "LastName",
                title: "Last Name",
                width: "120px"
                },{
                field: "Country",
                width: "120px"
                },{
                field: "City",
                width: "120px"
                },{
                field: "Title"
            }]
        };

【讨论】：