Disable Resizing for Specific Columns

Disable Resizing for Specific Columns

Column resizing is enabled or disabled for all Grid columns.

The following example demonstrates how to prevent resizing for specific columns.

Example

    <p>The <strong>bar</strong> column cannot be resized:</p>
    <div id="grid"></div>
    <script>
        $(function(){

            $("#grid").kendoGrid({
               dataSource: {
                   data: [
                    {foo: "foo 1", bar: "bar 1", baz: "baz 1"},
                    {foo: "foo 2", bar: "bar 2", baz: "baz 2"}
                   ]
               },
               resizable: true
            });

            var grid = $("#grid").data("kendoGrid");

            grid.resizable.bind("start", function(e) {
                if ($(e.currentTarget).data("th").data("field") == "bar") {
                  e.preventDefault();
                  setTimeout(function(){
                    grid.wrapper.removeClass("k-grid-column-resizing");
                    $(document.body).add(".k-grid th").css("cursor", "");
                  });
                }
            });

        });
    </script>

See Also

• Kendo UI Grid JavaScript API Reference
• How to Apply Minimum Width during Column Resize
• 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 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.