Tiles Reordering
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.
Disabling Reordering
When the 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 false.
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.
Programmatic Reordering
You have full control over the order of the tiles which can be manually updated through their order property.
The following example demonstrates how to swap two items programmatically.
Handling the reorder Event
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 can completely prevent the operation if a specific condition is not met.
The TileLayoutReorderEvent argument exposes the following event data:
item—The currently resized tile.items—A collection of allTileLayoutItemcomponents 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.