background

UI for Blazor

Blazor TileLayout

  • Drag and resize your dashboard to fit your preferences with the Blazor TileLayout component.
  • Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Telerik UI for Blazor TileLayout - Header
  • Build Dashboards with Blazor TileLayout

    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
  • Item Visibility

    Give users even more flexibility while working with the Telerik UI for Blazor TileLayout component. Benefit from the Visible parameter to control whether an individual item should be displayed or hidden without mixing up the already established order.

    See the Telerik UI for Blazor TileLayout Item Visibility demo

    Telerik UI for Blazor TileLayout - Item Visibility property
  • 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 Rich Text Editor Events
  • Right-to-Left (RTL) Support

    The Telerik UI for Blazor Tile Layout component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

    Learn more in our Blazor Right-to-Left Support documentation 

    Blazor Form RTL Support

All Blazor Components

Next Steps