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>

Answer 2

I have JavaScript code that will help achieve this functionality. It provides a way for a (command) column to retain a fixed size.

On the one hand, it acts as a minimum size for a column, but if the grid were to increase in size, the original size is enforced. This allows for other grid cells to increase in size by a larger amount.

Check out this dojo that shows this code in action.

Note that all columns need to have a specified width (this effectively becomes a minimum width).

The browser resize event is used to trigger the size recalculation of the grids.

This function supports master/detail and grouping.

I have not considered column resizing at this point.

If you have any ideas for improvements then go for it!

Answer 3

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