Apply Minimum Width during Column Resize

Apply Minimum Width during Column Resize

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.

Example

    <div id="grid"></div>
    <script>
        $(function(){

            $("#grid").kendoGrid({
               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
                  grid.thead.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);

                  grid.tbody.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);
               }
            });

        });
    </script>

See Also

• Kendo UI Grid JavaScript API Reference
• How to Adjust Row Height with Virtual Scrolling
• How to Change Group Header Position with Locked Columns
• How to Create and Use Auto Layout
• How to Disable Resizing for Specific Columns
• How to Hide the Vertical Scrollbar When Not Needed
• How to Resize Grid When Window Is Resized
• How to Use FontAwesome Icons in Custom Command Buttons

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.