Question

这是一个带有示例kendo网格的jsfiddle：

http://jsfiddle.net/owlstack/Sbb5Z/1619/

这是我设置kendo列的地方：

$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            data: createRandomData(10),
            schema: {
                model: {
                    fields: {
                        FirstName: {
                            type: "string"
                        },
                        LastName: {
                            type: "string"
                        },
                        City: {
                            type: "string"
                        },
                        Title: {
                            type: "string"
                        },
                        BirthDate: {
                            type: "date"
                        },
                        Age: {
                            type: "number"
                        }
                    }
                }
            },
            pageSize: 10
        },
        height: 500,
        scrollable: true,
        sortable: true,
        selectable: true,
        change: onChangeSelection,
        filterable: true,
        pageable: true,
        columns: [{
            field: "FirstName",
            title: "First Name",
            width: "100px",
        }, {
            field: "LastName",
            title: "Last Name",
            width: "100px",
        }, {
            field: "City",
            width: "100px",
        }, {
            field: "Title",
            width: "105px"
        }, {
            field: "BirthDate",
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #',
            width: "90px"
        }, {
            field: "Age",
            width: "50px"
        }]
    }).data("kendoGrid");

    applyTooltip();
});

我为每个列添加了单独的宽度。但是，我还想为每个剑道网格列设置最大宽度。是否可以设置最大宽度（不是所有列的集合，而是单个列的最大宽度？）？

Answer 1

没有像剑道网格那样暴露最大宽度的属性。其中一个解决方案是将列的宽度设置为自动调整大小，然后使用模板，其中使用css属性来保持最大宽度。

以下是示例。不确定你是否在寻找相同的答案。

 <style>.intro { max-width: 100px ;width: 20px ;background-color: yellow;</style>


 <script>
 $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                        },
                        pageSize: 20
                    },
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns: [{
                        field: "ContactName",
                        title: "Contact Name",
                        template : '<span class=intro>#:ContactName#</span>'
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title"
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country",
                        width: 150
                    }]
                });
            });
        </script>

Answer 2

我有JavaScript代码可以帮助实现此功能。它为（命令）列提供了一种保留固定大小的方法。

一方面，它充当列的最小大小，但如果网格的大小增加，则会强制执行原始大小。这允许其他网格单元的大小增加更多。

查看显示此代码的this dojo。

请注意，所有列都需要具有指定的宽度（这实际上是最小宽度）。

浏览器调整大小事件用于触发网格的大小重新计算。

此功能支持主/细节和分组。

此时我还没有考虑过列调整大小。

如果您有任何改进的想法，那就去吧！

Answer 3

    .k-grid td  
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width:150px;
    }

如何将max-width属性设置为各个kendo网格列？

3 个答案: