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

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

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