TileLayoutProps

Represents the properties of [TileLayout](% slug overview_tilelayout %) component.

Name	Type	Default	Description
autoFlow?	TileLayoutAutoFlow		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. Defaults to column (see example). jsx <TileLayout autoFlow="row" />
className?	string		Sets additional classes to the TileLayout. jsx <TileLayout className="custom-class" />
columns?	number		Specifies the default number of columns (see example). jsx <TileLayout columns={4} />
columnWidth?	string | number		Specifies the default width of the columns (see example). jsx <TileLayout columnWidth={200} />
dataItemKey?	string		Represents the key field of the TileLayout item. Used for setting unique keys to the TileLayout items. jsx <TileLayout dataItemKey="id" />
dir?	string		Represents the dir HTML attribute. This is used to switch from LTR to RTL. jsx <TileLayout dir="rtl" />
gap?	TileLayoutGap		Specifies the gaps between the tiles (see example). The possible keys are: rows columns jsx <TileLayout gap={{ rows: 10, columns: 10 }} />
id?	string		Sets the id property of the root element. jsx <TileLayout id="tile-layout" />
ignoreDrag?	(event: any) => boolean		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")); }} will make only the headers draggable. Setting ignoreDrag={(e) => { return e.target.nodeName == "INPUT"; }} will ignore dragging input elements. jsx <TileLayout ignoreDrag={(e) => e.target.nodeName === 'INPUT'} />
items?	TileLayoutItem[]		The collection of items that will be rendered in the TileLayout (see example). jsx <TileLayout items={[{ header: 'Header', body: 'Body' }]} />
onReposition?	(event: TileLayoutRepositionEvent) => void		Fires when the user repositions the tile by either dragging or resizing (see example). jsx <TileLayout onReposition={(e) => console.log(e.value)} />
positions?	TilePosition[]		The list of tiles' positions which are used when the TileLayout is in controlled mode (see example). jsx <TileLayout positions={[{ col: 1, row: 1 }]} />
rowHeight?	string | number		Specifies the default height of the rows (see example). jsx <TileLayout rowHeight={100} />
style?	React.CSSProperties		Sets additional CSS styles to the TileLayout. jsx <TileLayout style={{ backgroundColor: 'lightgray' }} />