ASP.NET MVC TileLayout

  • The ASP.NET MVC TileLayout component enables you to drag and rearrange your dashboard to fit your specific preferences. Control the rows, columns, and content of your layout, and let your users store their preferred setup.
  • Part of the Telerik UI for ASP.NET MVC library along with 110+ professionally designed UI components.
  • Includes support, documentation, demos, virtual classrooms and more!
Telerik UI for ASP.NET MVC Suite
  • Add/Remove Items Options

    Users have the ability to add new tiles or remove existing ones dynamically according to their needs. They can simply drag and drop new tiles or click the X icon on the tiles that they no longer need. 
    Telerik UI for ASP.NET MVC TileLayout - add or remove items
  • Resizable and Reorderable Elements

    Other controls placed in a TileLayout, are automatically resizable and reorderable with simple mouse interactions. By simply dragging and dropping items left and right, any user can setup their work environment the way it is most convenient to them.

    Telerik UI for ASP.NET MVC TileLayout Reorder
  • 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 or Ctrl+Arrows to resize them. 
    Telerik UI for ASP.NET Core Keyboard navigation
  • Overview

    At Telerik we are obsessed with giving our clients maximum customization, but customization is also important for the end user. The Telerik UI for ASP.NET MVC TileLayout component is a container which allows the user to reorder and resize any of its children by dragging and dropping them wherever they would most want it to be. This is especially useful for dashboard-style screens where the user spends most of his time looking at the same things which they would love to prioritize.

    Telerik UI for ASP.NET MVC TileLayout
  • TileLayout Configuration

    Setting up the TileLayout only requires you to define a grid of X rows by Y columns for the container and then specify how wide and how tall each of the contained items will be. This is extremely similar to how a CSS Grid works so if you are familiar with it, you will immediately be familiar with the TileLayoutEach container tile has configurable dimensions, header and body content which can be plain text or a complex template with components in it.

All ASP.NET MVC Components

Next Steps