Question

我必须在Kendo Grid中设置一些没有列标题的固定列宽。这意味着我可以使用单列＆＃34; foo_data＆＃34;我隐藏了这个列标题并在kendo Grid中显示为原样。网格中的列和行是动态的。在下面的例子中有9列和6行有时我可能得到3列和5行。我正在使用Kendo Ui，Angularjs和bootstrap框架。我希望Grid中的列之间有更多的空间。我可以实现这个目标吗？任何帮助都将受到高度赞赏。

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"
    }

Answer 1

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

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

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

Answer 2

您可以按照以下代码进行设置。有关更多信息，请参阅centerOffset

 $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"
            }]
        };

如何在Kendo Grid

2 个答案: