Progress Telerik UI for Blazor

TileLayout

  • 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.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText

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.