javascript - 如何为单个剑道网格列设置最大宽度属性？

Question

这是一个带有示例剑道网格的 jsfiddle:

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

这是我设置剑道列的地方:

$(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

剑道网格没有像 max-width 这样的属性。关于解决方案的一轮是将列的宽度设置为自动调整大小，然后在使用 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>