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

Resizable

configuration

If object is used, it allows configuration of resizable.columns and resizable.rows. If set to true, only column resizing will be enabled.

By default, column and row resizing is disabled.

resizable

Object|Boolean

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  resizable: true
});
</script>

Check Column resizing for a live demo and

the Column widths help section for additional relevant information.

If set to true, users can resize columns by dragging the edges (resize handles) of their header cells. As of Kendo UI Q1 2015, users can also auto-fit a column by double-clicking its resize handle. In this case the column will assume the smallest possible width, which allows the column content to fit without wrapping.

By default, column resizing is disabled.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  resizable: {
    columns: true
  }
});
</script>

Check Column resizing for a live demo and

the Column widths help section for additional relevant information.

For column resizing on mobile devices please refer to the Grid Adaptive Rendering official demo and the Adaptive Rendering documentation article.

resizable.rows

Boolean

If set to true, users can resize Grid rows by dragging their bottom edge. Users can also auto-fit a row by double-clicking its bottom edge. In this case the row will assume the smallest possible height, which allows the cells content to be fully displayed.

In scenario where row selection is enabled, users are allowed to resize all selected rows at once by performing the resize interaction on one of them.

By default, row resizing is disabled.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  resizable: {
    rows: true
  }
});
</script>