TileLayoutComponent

Represents the Kendo UI TileLayout component for Angular

html

<kendo-tilelayout [columns]="3" [gap]="10">
  <kendo-tilelayout-item>Content 1</kendo-tilelayout-item>
  <kendo-tilelayout-item>Content 2</kendo-tilelayout-item>
</kendo-tilelayout>

Selector

kendo-tilelayout

Inputs

Name	Type	Default	Description
autoFlow	TileLayoutFlowMode	'column'	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.
columns	number	1	Specifies the number of columns (see example).
columnWidth	string | number	'1fr'	Sets the width of the columns. Use numeric values for pixels or string values for other CSS units (see example).
gap	number | TileLayoutGap	{ rows: 16, columns: 16 }	Sets the spacing between layout items in pixels. Use an object with rows and columns properties to set different horizontal and vertical spacing. Use a single number to apply the same spacing to both directions.
navigable	boolean	true	Enables or disables keyboard navigation.
reorderable	boolean	false	Enables or disables item reordering (see example).
resizable	boolean	false	Enables or disables item resizing (see example).
rowHeight	string | number	'1fr'	Sets the height of the rows. Use numeric values for pixels or string values for other CSS units (see example).

Fields

Name	Type	Default	Description
items	QueryList<TileLayoutItemComponent>		Contains a query list of the TileLayoutItemComponent instances that are used in the TileLayout. This allows you to access the items programmatically and manipulate their properties or listen to their events.

Events

Name	Type	Description
reorder	EventEmitter<TileLayoutReorderEvent>	Fires when item reordering is completed (see example). You can prevent this event to cancel the reorder operation.
resize	EventEmitter<TileLayoutResizeEvent>	Fires when item resizing is completed (see example). You can prevent this event to cancel the resize operation.