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 autoFlow option.
The following example demonstrates the reordering functionality in action.
When the reorderable option of the TileLayout is enabled, you could fine tune the behavior by disabling the reordering of specific tiles. Each nested TileLayoutItem component has its own reorderable property. In order to stop 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 might change as a result of the reordering or resizing of other tiles.
The developer has full control over the order of the tiles, which can be manually updated through their order property.
The following example demonstrates swapping two items programmatically.
The 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 could prevent the operation completely if a specific condition is not met.
The TileLayoutReorderEvent argument exposes the following event data:
item—The currently resized tile.
items—Collection of all TileLayoutItem components 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.