Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
      • Overview
      • AppBar
      • Avatar
      • BottomNavigation
      • Breadcrumb
      • Card
      • Drawer
      • GridLayout
      • Menu
      • PanelBar
      • Splitter
      • StackLayout
      • Stepper
      • TabStrip
      • TileLayout
      • GlobalizationAPI
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to KendoReact? Start a free 30-day trial

TileLayoutProps

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

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).

className?

string

Sets additional classes to the TileLayout.

columnWidth?

number | string

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

columns?

number

Specifies the default number of columns (see example).

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

gap?

TileLayoutGap

Specifies the gaps between the tiles (see example).

  • The possible keys are:
  • rows
  • columns

id?

string

Sets the id property of the root element.

ignoreDrag?

(event: any) => boolean

Use this callback to prevent or allow dragging of the tiles based on specific dom event. 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.

items?

TileLayoutItem[]

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

onReposition?

(event: TileLayoutRepositionEvent) => void

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

positions?

TilePosition[]

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

rowHeight?

number | string

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

style?

CSSProperties

Sets additional CSS styles to the TileLayout.