New to Kendo UI for Angular? Start a free 30-day trial

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disable Reordering

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 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 might change as a result of the reordering or resizing of other tiles.

Example
View Source
Edit In Stackblitz  
Change Theme:

Programmatic Reordering

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 could prevent the operation completely if a specific condition is not met.

The TileLayoutReorderEvent argument exposes the following event data:

  • itemThe currently resized tile.
  • itemsCollection of all TileLayoutItem components in their current order.
  • oldColThe previous start column of the reordered tile.
  • oldRowThe previous start row of the reordered tile.
  • newColThe new start column of the reordered tile.
  • newRowThe new start row of the reordered tile.
  • oldIndexThe previous order index of the reordered tile.
  • newIndexThe new order index of the reordered tile.

The following example demonstrates how to apply custom logic after reordering.

Example
View Source
Edit In Stackblitz  
Change Theme: