UI for ASP.NET Core
ASP.NET Core TileLayout
- The ASP.NET Core TileLayout lets you drag and rearrange your dashboard to fit your custom preferences.
- Part of the Telerik UI for ASP.NET Core library along with 110+ professionally designed UI components.
- Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
-
Overview
We developers may sometimes be picky about our tools, but end users are much pickier. We developed the Telerik UI for ASP.NET Core TileLayout control to provide you with an easy way to answer user customization requests. It is a container which allows the user to reorder and resize any of its children by dragging and dropping them. This enables them to fit the information they need the most where they are comfortable reading it. Applications which feature dashboard-style screens will benefit the most from making use of this component.
Check out the ASP.NET Core TileLayout demo
-
Grid Configuration
The TileLayout is defined as a grid of X rows by Y columns. This grid will be the user’s “play area”. You then specify the width and height of all contained items and the component does the rest. This is effectively the same pattern the CSS Grid uses so if you’ve used CSS Grids before, you will feel instantly at home with the TileLayout. Each container tile has configurable dimensions, header and body content which can be plain text or a complex template with components in it. -
Add/Remove Items
New tiles can be added and existing tiles removed dynamically by the user as their needs change. Doing so is as easy as dragging and dropping the new tiles and clicking the X icon on the top right of the tiles that are no longer needed.
-
Resizable and Reorderable Elements
Once controls are added as children of the TileLayout, they will be immediately intractable. By default, all children can be resized and rearranged with standard mouse interactions. Any user can then configure their work environment by just dragging with the mouse.
Learn more about Resizing and Reordering TileLayout Elements
-
Keyboard Navigation
With ten different key bindings, the TileLayout component is as good at being operated by the keyboard, as with a mouse. Use Tab to move around tiles, Shift+Arrows to reorder items and Ctrl+Arrows to resize them.
