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
Each Tile can be configured with several properties:
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.
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.
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.
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