By default, the reordering functionality of the TileLayout is disabled.
To enable it, set the
reorderable option of the component to
true. The respective new positions of the affected tiles, resulting from a reorder operation, will depend on the current value of the TileLayout
The following example demonstrates the reordering functionality in action.
reorderable option of the TileLayout is enabled, you can fine-tune the behavior by disabling the reordering of specific tiles. Each nested
TileLayoutItem component has its own
reorderable property. To disable the reordering of a specific tile, set this option to
When the reordering of individual tiles is disabled, the end user will not be able to drag them to a new position. Their initial position, however, may change as a result of the reordering or resizing of other tiles.
You have full control over the order of the tiles which can be manually updated through their
The following example demonstrates how to swap two items programmatically.
reorder event of the TileLayout is fired when the end user finishes dragging a tile to a new position. 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 completely prevent the operation if a specific condition is not met.
TileLayoutReorderEvent argument exposes the following event data:
item—The currently resized tile.
items—A collection of all
TileLayoutItemcomponents in their current order.
oldCol—The previous start column of the reordered tile.
oldRow—The previous start row of the reordered tile.
newCol—The new start column of the reordered tile.
newRow—The new start row of the reordered tile.
oldIndex—The previous order index of the reordered tile.
newIndex—The new order index of the reordered tile.
The following example demonstrates how to apply custom logic after reordering.