Row Row Resizing
The Row Resizing functionality for the Grid enables you to resize one or more table rows.
For a runnable example, refer to the demo on Row Resizing in the Grid.
Getting Started
To enable the Drag and Drop functionality, set the resizable.rows property to true.
$("#grid").kendoGrid({
resizable: {
rows: true
},
// Other configuration.
});
Multiple Rows
The user can resize more than one row at the same time. To do so, set the selectable property to multiple row. Once the user has made multiple selections, they can drag the resize handle on one of the rows and the resize will affect the rest of the selected elements automatically.
$("#grid").kendoGrid({
resizable: {
rows: true
},
selectable: "multiple row",
// Other configuration.
});
Row Resize Event
The rowResize event fires when the user resizes one or more rows.
$("#grid").kendoGrid({
resizable: {
rows: true
},
selectable: "multiple row",
rowResize: function(e) {
// Execute logic when the user resizes a row.
},
// Other configuration.
});
Known Limitations
- The row resize feature does not work with the drag & drop functionality of the Grid. You can use only one of the two features at the same time.
- In a Hierarchical scenario, only the innermost child Grid(s) can have resizable rows. The row resizing feature must be disabled for all the parent Grid components.