How can I set a max-width property to individual kendo grid columns?

Question

Here's a jsfiddle with a sample kendo grid:

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

Here's where I set the kendo columns:

$(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();
});

I added individual widths to each of the columns. However, I would also like to set a max-width to each kendo grid column. Is it possible to set a max-width (not a set one for all columns but max-width for individual columns?)?

Answer 1

There is no property like max-width exposed for kendo grid. One of the round about solution will be to set Width of Column as autosize and then use template where you use css properties to maintain max width.

Following is the example. Not sure if you are looking for the same answer.

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