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.
When the resizable option of the TileLayout is enabled, you could fine tune the behavior by disabling the resizing of specific tiles. Each nested TileLayoutItem component has its own resizable property. In order to stop the resizing of a specific tile, set this option to
Updating the row and column span of the tiles is possible even when their resizable option is set to
The following example demonstrates resizing an item programmatically.
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 could 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—Collection of all TileLayoutItem components in their current order
oldColSpan—The previous colSpan value of the resized tile
oldRowSpan—The previous rowSpan value of the resized tile
newColSpan—The new colSpan value of the resized tile
newRowSpan—The new rowSpan value of the resized tile
The following example demonstrates how to change the position of the items after resizing.