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

TileLayoutComponent

Represents the Kendo UI TileLayout component for Angular

Selector

kendo-tilelayout

Inputs

autoFlow

TileLayoutFlowMode

Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout (see example). For further reference, check the grid-auto-flow CSS article.

The possible values are:

  • (Default) column
  • row
  • row dense
  • column dense
  • none

columnWidth

string | number

(default: '1fr') Determines the width of the columns. Numeric values are treated as pixels (see example).

columns

number

(default: 1) Defines the number of columns (see example).

reorderable

boolean

(default: false) Determines whether the reordering functionality will be enabled (see example).

resizable

boolean

(default: false) Determines whether the resizing functionality will be enabled (see example).

rowHeight

string | number

(default: '1fr') Determines the height of the rows. Numeric values are treated as pixels (see example).

gap

TileLayoutGap | number

The numeric values which determine the spacing in pixels between the layout items horizontally and vertically. Properties:

  • rows - the vertical spacing. Numeric values are treated as pixels. Defaults to 16.
  • columns - the horizontal spacing. Numeric values are treated as pixels. Defaults to 16.

When bound to a single numeric value, it will be set to both rows and columns properties.

Fields

items

QueryList<TileLayoutItemComponent>

A query list of all declared TileLayoutItemComponent items.

Events

reorder

EventEmitter<TileLayoutReorderEvent>

Fires when the user completes the reordering of the item (see example). This event is preventable. If you cancel it, the item will not be reordered.

resize

EventEmitter<TileLayoutResizeEvent>

Fires when the user completes the resizing of the item (see example). This event is preventable. If you cancel it, the item will not be resized.