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

6
votes

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

3
javascriptcsskendo-uikendo-grid
You can't do this within Kendo UI (the only width property available here is the one you've already used) but you can probably still use JavaScript itself to set a max-width. Maybe put the columns into an array and then set max-width to individual columns by their place in the array, eg. 0, 3, 5, etc.). Now, if you were to set up the table using HTML and then just call the grid ($("#grid").kendoGrid();), then you could probably use CSS to set each col's max-width inline or with a class. - TylerH
Hmm that isn't good. Can you show me an example of setting up the columns in an array? Thank you - Kala J
I don't actually know Kendo/jQuery/JavaScript, I was just referencing the Kendo UI docs. - TylerH
Have you tried using a column attribute and placing the max-width? attribute: {style: "max-width:200px"}. I was actually using this earlier today to color certain columns. Sorry on my phone. - Chris

3 Answers

4
votes

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

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!

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