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

Tiles Resizing

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disable Resizing

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 false.

Example
View Source
Edit In Stackblitz  
Change Theme:

Programmatic Resizing

The developer has full control over the size of the tiles, which can be manually updated through their rowSpan and colSpan options.

Updating the row and column span of the tiles is possible even when their resizable option is set to false.

The following example demonstrates resizing an item programmatically.

Example
View Source
Edit In Stackblitz  
Change Theme:

Handling the Resize Event

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:

  • itemThe currently resized tile.
  • itemsCollection of all TileLayoutItem components in their current order
  • oldColSpanThe previous colSpan value of the resized tile
  • oldRowSpanThe previous rowSpan value of the resized tile
  • newColSpanThe new colSpan value of the resized tile
  • newRowSpanThe new rowSpan value of the resized tile

The following example demonstrates how to change the position of the items after resizing.

Example
View Source
Edit In Stackblitz  
Change Theme: