Progress Telerik UI for Blazor

Blazor TileLayout

  • Drag and resize your dashboard to fit your preferences with the Blazor TileLayout component. Control the rows, columns and content and let users store their preferred setup.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Telerik UI for Blazor TileLayout component is a flexible container ideal for building dashboards. It stores Tiles of various sizes, each Tile usually displaying targeted information. Tiles can be reordered by the end user to best match their style of work. The content of each Tile can be as simple as plain text or as complex as a combination of multiple other controls like a Grid and a TreeList.

    Check out the Blazor TileLayout demo

    Telerik UI for Blazor TileLayout Overview
  • Items

    Each Tile can be configured with several properties:

    • Size (column and row span)
    • Header text and header template
    • The body containing the actual content of the Tile item
  • Resizing Items

    Tile items can be resized as long as their Resizable parameter is set to true. End users can then effortlessly resize each item by dragging its bottom border, right border or bottom-right corner.

    Telerik UI for Blazor TileLayout Resizing
  • Reordering Items

    Tiles can also be reordered as long as their Reorderable parameter is set to true. Reordering items can then be done by dragging each tile header to the place where it should go.

    Telerik UI for Blazor TileLayout Reordering
  • State Management

    As users can spend plenty of time organizing their dashboard, it’s important to save their preferences and reuse them whenever the control is shown again. The Telerik UI for Blazor TileLayout implements this via the pair of methods GetState() and SetState(). The entire control’s state contains each tile’s RowSpawn, ColSpawn and Order to be able to perfectly restore the layout as it used to be.

    Telerik UI for Blazor TileLayout Persist State
  • Events

    Two events are exposed by the TileLayout component: OnResize and OnReorder. Both events aim to help mainly with state management and are triggered whenever a tile is resized/reordered, giving you an easy way to save the current state or execute other logic dependent on the item’s position and size.

    Learn more about the TileLayout events in our documentation

    Telerik UI for Blazor Events

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.