Kendo UI for Angular

TileLayout

  • Automatically display and layout information in an interactive dashboard-like view with tiles that end-users can drag, drop, and reorganize.
  • Part of the Kendo UI for Angular library along with more than 100 professionally-designed components developers trust for all their Angular UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms and a 3-million-strong developer community.

Angular UI Component Library
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Kendo UI for Angular TileLayout component is great for organizing information into dashboard-like views. It displays and aligns a collection of tiles into columns and rows. The tiles can contain static information of other Kendo UI components and are highly customizable. The TileLayout also allows for end-users to rearrange and resize any of the tiles while giving the developer full control over the flow of the component during these events.

    See the Angular TileLayout demo.

    Angular TileLayout-Overview
  • Tiles Configuration

    The tiles contained in the Kendo UI for Angular TileLayout component are designed to be highly customizable so they can display virtually anything. Each tile contains a header and a body, and each can be configured for size, position, style, content, and much more.

    See the Angular TileLayout configuration demo.

    Angular TileLayout Tiles Configurations
  • Columns and Rows

    The Kendo UI for Angular TileLayout control is based on CSS layout grid principles and is similarly configurable. You set the number and size of columns and the component will automatically determine the number of rows based on the size and amount of displayed content.

    See the Angular TileLayout columns and rows demo.

  • Auto Flow

    The Kendo UI for Angular TileLayout component will arrange tiles following CSS layout grid. With Auto Flow enabled, each container sets the starting position and TileLayout will automatically arrange the rest of the tiles. Alternatively, you can disable Auto Flow and set fixed positions.

    See the Angular TileLayout auto flow demo.

    Angular TileLayout Auto Flow
  • Tile Reordering

    You can choose to allow or prevent users from reordering tiles using drag-and-drop operations. If you choose to allow them to drag and reorder tiles, Kendo UI for Angular TileLayout will automatically reorder the rest of the tiles with auto flow. Additionally, you can programmatically reorder tiles.

    See the Angular TileLayout reordering demo.

    Angular TileLayout Reorder
  • Tile Resizing

    You can choose to allow or prevent users from resizing tiles. If you choose to allow them to resize tiles, Kendo UI for Angular TileLayout will automatically reorder the rest of the tiles with auto flow. Additionally, you can programmatically resize tiles.

    See the Angular TileLayout resizing demo.

    Angular TileLayout Resizing
Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI