• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Tiles

The TileLayout provides options for setting the behavior of its tiles.

By using these options, you can configure the following tile features:

Position and Dimensions

There are several properties that control the position and dimensions of the TileLayout tiles. You can pass these properties either as a defaultPosition object for each tile (uncontrolled mode), or though the positions property of the TileLayout component. See Controlling the Position for details.

The possible configuration options are:

  • col (Required)—Defines on which column-line the tile will start. The reordering and resizing functionalities require it to work as expected.
  • row—Defines on which row-line the tile will start.
  • colSpan—Specifies the number of cols that the tile spans.
  • rowSpan—Specifies the number of rows that the tile spans.
  • order—Defines the order index of the tile. If not set, tiles will receive a sequential order.
Example
View Source
Change Theme:

Controlling the Position

The TileLayout provides options for controlling the position of each item by using the positions property of the TileLayout.

To manage the positions of the TileLayout items:

  1. Use its positions property.
  2. Handle the onReposition event.
  3. Pass the new value through the props.
Example
View Source
Change Theme:

Resizing

Users can resize the tiles by dragging their bottom and right-hand side borders or the bottom-right corner. Use the resizable property to determine if the tile can be resized or allow one-direction resizing only.

The possible values are:

  • 'horizontal'—Users can resize the tile only in a horizontal direction by using the right resize handle.
  • 'vertical'—Users can resize the tile only in a vertical direction by using the bottom resize handle.
  • true (Default)—Users can resize the tile in both horizontal and vertical directions by using the resize handles from the right and bottom sides and bottom-right corner.
  • false—Users cannot resize the tile.

Extending a tile in the direction of an adjacent tile will push the adjacent tile down on the next row but on the same column-line. Narrowing a tile produces a gap that can be filled by another, if it fits and if it's on the same column-line.

Note: The resizing functionality is enabled by default.

Example
View Source
Change Theme:

Reordering

Users can reorder the tiles by dragging the whole item space. Use the reorderable boolean property to configure dragging.

Dragging a tile in the direction of an adjacent tile will push the adjacent tile down on the next row but on the same column-line. The initial placement of the dragged tile can be filled by another, if it fits and if it's on the same column-line. Non-reorderable tiles can fill gaps from reordering other tiles.

Note: The reordering functionality is enabled by default.

Example
View Source
Change Theme:

Custom Rendering

The TileLayout tiles enable you to customize its whole appearance. For that purpose, use the item property.

The following example demonstrates how to customize the look and feel of the tiles.

Example
View Source
Change Theme: