Tiles Resizing
By default, the resizing functionality of the TileLayout is disabled.
To enable it, set the resizable option of the component to true. The respective new positions of the affected tiles, resulting from a resize operation, will depend on the current value of the TileLayout autoFlow option.
The following example demonstrates the resizing functionality in action.
Disabling Resizing
When the resizable option of the TileLayout is enabled, you can fine-tune the behavior by disabling the resizing of specific tiles. Each nested TileLayoutItem component has its own resizable property. To disable the resizing of a specific tile, set this option to false.
Programmatic Resizing
You have full control over the size of the tiles which can be manually updated through their rowSpan and colSpan options.
Updating the row and column span of the tiles is possible even when their
resizableoption is set tofalse.
The following example demonstrates how to resize an item programmatically.
Handling the resize Event
The resize event of the TileLayout is fired when the end user finishes dragging the resize handler of a tile. The exposed information in the event handler allows you to specify the position and the size of any tile in the TileLayout based on custom logic. Alternatively, you can prevent the operation completely if a required condition is not met.
The TileLayoutResizeEvent argument exposes the following event data:
item—The currently resized tile.items—A collection of allTileLayoutItemcomponents in their current order.oldColSpan—The previouscolSpanvalue of the resized tile.oldRowSpan—The previousrowSpanvalue of the resized tile.newColSpan—The newcolSpanvalue of the resized tile.newRowSpan—The newrowSpanvalue of the resized tile.
The following example demonstrates how to change the position of the items after resizing.