New to Kendo UI for jQuery? Download free 30-day trial

Apply Minimum Width during Column Resize


Product Progress Kendo UI Grid for jQuery
Preferred Language JavaScript


How can I apply a minimum width during column resize in the Kendo UI Grid?


When the user starts resizing, a start event fires and some references are saved.

Then these references are used in the resize event, which is fired continuously during resizing. The new column width is periodically checked and if it decreases below the set minimum width, the minimum column width is enforced back. Since the Grid table(s) also receive a width style during resizing, it is overridden as well when needed. To enforce a maximum width, you can use a similar logic.

The following example demonstrates how to use the API for internal Grid column resizing to enforce a minimum column width during column resize.

    <div id="grid"></div>

               dataSource: {
                   data: [{foo: "item", bar: "number", baz: "one"}]
               resizable: true

            var minTableWidth;
            var minColumnWidth = 100;
            var th;
            var idx;
            var grid;

            $("#grid").data("kendoGrid").resizable.bind("start", function(e) {
               th = $(e.currentTarget).data("th");
               idx = th.index();
               grid = th.closest(".k-grid").data("kendoGrid");

            $("#grid").data("kendoGrid").resizable.bind("resize", function(e) {
               if (th.width() >= minColumnWidth) {
                  minTableWidth = grid.tbody.closest("table").width();

               if (th.width() < minColumnWidth) {
                  // the next line is ONLY needed if Grid scrolling is enabled



See Also

In this article
Not finding the help you need? Improve this article