Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
New to Kendo UI for Angular? Start a free 30-day trial

TileLayoutComponent

Represents the Kendo UI TileLayout component for Angular

Selector

kendo-tilelayout

Inputs

NameTypeDefaultDescription

autoFlow

TileLayoutFlowMode

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.

The possible values are:

  • (Default) column
  • row
  • row dense
  • column dense
  • none

columnWidth

string | number

'1fr'

Determines the width of the columns. Numeric values are treated as pixels (see example).

columns

number

1

Defines the number of columns (see example).

reorderable

boolean

false

Determines whether the reordering functionality will be enabled (see example).

resizable

boolean

false

Determines whether the resizing functionality will be enabled (see example).

rowHeight

string | number

'1fr'

Determines the height of the rows. Numeric values are treated as pixels (see example).

gap

number | TileLayoutGap

The numeric values which determine the spacing in pixels between the layout items horizontally and vertically. Properties:

  • rows - the vertical spacing. Numeric values are treated as pixels. Defaults to 16.
  • columns - the horizontal spacing. Numeric values are treated as pixels. Defaults to 16.

When bound to a single numeric value, it will be set to both rows and columns properties.

Fields

NameTypeDefaultDescription

items

QueryList<TileLayoutItemComponent>

A query list of all declared TileLayoutItemComponent items.

Events

NameTypeDescription

reorder

EventEmitter<TileLayoutReorderEvent>

Fires when the user completes the reordering of the item (see example). This event is preventable. If you cancel it, the item will not be reordered.

resize

EventEmitter<TileLayoutResizeEvent>

Fires when the user completes the resizing of the item (see example). This event is preventable. If you cancel it, the item will not be resized.

In this article

Not finding the help you need?