TileLayoutProps

Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout. For further reference, check grid-auto-flow CSS article.

Sets additional classes to the TileLayout.

Specifies the default number of columns (see example).

Specifies the default width of the columns (see example).

Represents the key field of the TileLayout item. Used for setting unique keys to the TileLayout items.

Represents the dir HTML attribute. Use this to switch from LTR to RTL.

Specifies the gaps between the tiles (see example).

• The possible keys are:
• rows
• columns

Sets the id property of the root element.

Use this callback to prevent or allow dragging of the tiles based on specific DOM events. Setting ignoreDrag={(e) => { return !(e.target.classList.contains("k-card-title")); }} makes only the headers draggable. Setting ignoreDrag={(e) => { return e.target.nodeName == "INPUT"; }} ignores dragging input elements.

The collection of items that will be rendered in the TileLayout (see example).

Fires when the user repositions the tile by either dragging or resizing (see example).

The list of tiles' positions which are used when the TileLayout is in controlled mode (see example).

Specifies the default height of the rows (see example).

Sets additional CSS styles to the TileLayout.