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

kendo grid set column width dynamically
kendo grid column width not working
kendo grid column width percentage
kendo grid column width auto
kendo grid minimum column width
kendo grid resize column
kendo grid auto fit columns
kendo grid width

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

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>

css styling for grid columns; max-width for grid columns in Kendo UI , In this article you can see how to configure the columns.width property of the Kendo UI Grid. 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.

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!

columns.width - API Reference, Get started with the Angular Grid by Kendo UI supporting responsive web Responsive columns—Based on the viewport width, the visibility of the Grid columns toggles. Responsive height—Based on the height setting (for example, " 100%" ), the Grid The property accepts valid strings for the matchMedia browser API and� The grid will create a column for every item of the array. If this setting is not specified the grid will create a column for every field of the data item. Example - specify grid columns as array of strings

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

Responsive Design - Grid - Kendo UI for Angular, This demo shows how to configure the Kendo UI Grid to control the visibility of the columns, use their media property. field: "CompanyName", title: "Company Name", width: 250, media: "(min-width: 850px)" } media: "(max-width: 450px)" }] }); }); </script> </div> <script Do Not Sell My Personal Info. You can control the height of the Grid through the height CSS property. If the height is set in percentage units, the Grid adjusts its layout accordingly just like a regular HTML element. If the height is set in percentage units, the Grid adjusts its layout accordingly just like a regular HTML element.

Kendo Grid Responsive Columns Demo - Demos, Progress� Kendo UI� for Angular Feedback Portal I would like to set max- width on certain columns of a grid to force them to not becoming� <kendo:grid-column media="media"> </kendo:grid-column> menu boolean. If set to true the column will be visible in the grid column menu. By default the column menu includes all data-bound columns (ones that have their field set). Example <kendo:grid-column menu="menu"> </kendo:grid-column> minResizableWidth float

Provide a [max-width] input property for grid columns in a resizable , 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� Description. How can I create a Kendo UI jQuery Grid with column and data fields information which is retrieved during runtime? Solution. The following example demonstrates how to create a Grid with column and data-field information that is retrieved during runtime.

How can I set a max-width property to individual kendo grid columns , Kendo grid column max-width. How can I set a max-width property to individual kendo grid columns , There is no property like max-width exposed for kendo grid. Controls / RadGridView / Columns. Controlling Columns Width. There are a couple of approaches available for setting the width of the columns within RadGridView: On RadGridView Level. On a Column Level. On RadGridView Level. You can set RadGridView's ColumnWidth property which will affect all columns' width (unless the width is set explicitly

Comments
  • 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.
  • Hmm that isn't good. Can you show me an example of setting up the columns in an array? Thank you
  • I don't actually know Kendo/jQuery/JavaScript, I was just referencing the Kendo UI docs.
  • 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.
  • Dojo link appears to be dead now.
  • Some text to explain your answer would be helpful.