TileLayoutComponent

Represents the Kendo UI TileLayout component for Angular

Selector

kendo-tilelayout

Inputs

Name	Type	Default	Description
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
columns	number	1	Defines the number of columns (see example).
columnWidth	string | number	'1fr'	Determines the width of the columns. Numeric values are treated as pixels (see example).
gap	number | TileLayoutGap		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.
navigable	boolean	true	When the keyboard navigation is enabled, the user can use dedicated shortcuts to interact with the TileLayout. By default, navigation is enabled. To disable it and include focusable TileLayout content as a part of the natural tab sequence of the page, set the property to false.
reorderable	boolean	false	Determines whether the reordering functionality will be enabled (see example).
resizable	boolean	false	Determines whether the resizing functionality will be enabled (see example).
rowHeight	string | number	'1fr'	Determines the height of the rows. Numeric values are treated as pixels (see example).

Fields

Name	Type	Default	Description
items	QueryList<TileLayoutItemComponent>		A query list of all declared TileLayoutItemComponent items.

Events

Name	Type	Description
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.