ASP.NET Core TileLayout Overview

The TileLayout is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The Telerik UI TileLayout TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TileLayout widget.

The TileLayout widget allows you to configure a two-dimensional grid-based sandbox surface to display content in tiles which can be dragged around and rearranged to create any modern page design.

The component is based on the CSS Grid (with all its features) which covers the majority of cases and uses additional JavaScript logic to provide resizing, reordering, and templates customizations.

• Demo page for the TileLayout HtmlHelper

• Demo page for the TileLayout TagHelper

Initializing the TileLayout

To initialize the TileLayout, specify the number of Columns() at root level and use the RowSpan() and ColSpan() of the containers to position the content in the available grid space.

The example below will render a grid with two columns which can be resized both vertically and horizontally.

    @(Html.Kendo().TileLayout()
        .Name("tilelayout")
        .Columns(2)
        .RowsHeight("285px")
        .ColumnsWidth("285px")
        .Containers(c => {
            c.Add().Header(h => h.Text("Header One")).BodyTemplate("Body Text One").ColSpan(1).RowSpan(1);
            c.Add().Header(h => h.Text("Header Two")).BodyTemplate("Body Text Two").ColSpan(1).RowSpan(1);
            c.Add().Header(h => h.Text("Header Three")).BodyTemplate("Body Text Three").ColSpan(2).RowSpan(1);
        })
        .Reorderable(true)
        .Resizable(true)
    )

        <kendo-tilelayout name="tilelayout" columns="2" resizable="true" reorderable="true" columns-width="300px" rows-height="300px">
            <containers>
                <container body-template="Template One" col-span="1" row-span="1">
                    <container-header text="One" />
                </container>
                <container body-template="Template Two" col-span="1" row-span="1">
                    <container-header text="Two" />
                </container>
                <container body-template="Template Three" col-span="2" row-span="1">
                    <container-header text="Three" />
                </container>
            </containers>
        </kendo-tilelayout>

Grid Layout Configuration

The Telerik UI TileLayout for ASP.NET Core available grid space is defined by using the Columns() method. The number of rows in which the tiles will be displayed will automatically adjust. The columns and rows have a default width of 1fr which can be modified by using the ColumnsWidth() and RowsHeight() methods.

The RowsHeight() and ColumnsWidth() methods parameter value sets the maximum height/width the rows or columns of the widget will stretch to. Dependent on resizing, content and user interactions with the layout, they may be less than the set value.

Tile Layout Configuration

Each tile can fit within multiple rows and columns. The space that the tile takes up is determined by its container's RowSpan() and ColSpan(). For more information about the containers and their configurable properties, see the containers article.

Gaps

The grid lines between the rows and columns can be configured by specifying the Gap.Columns for the vertical space between the tiles and the Gap.Rows for the horizontal spacing.

    .Gap(g=>g.Columns(10).Rows(10))

    <kendo-tilelayout name="tilelayout" columns="2" resizable="true" reorderable="true" columns-width="300px" rows-height="300px">
            <gap rows="10" columns="10" />

These properties are also known as the gutters between the rows/columns.

Functionality and Features

Feature	Description
Reordering	You can enable the reordering feature to drag and drop the tile containers.
Resizing	The TileLayout allows you to resize its containers.
Containers	You can specify the appearance of the containers.
Add or Remove Tiles	You can add or remove tiles dynamically.
Events	The TileLayout allows you to handle its events and implement any custom logic.
Keyboard Navigation	The component delivers keyboard shortcuts for faster navigation.

Known Limitations

Currently, the component is not supported in Internet Explorer as the browser does not support gutters.

Next Steps

• Getting Started with the TileLayout

• Basic Usage of the TileLayout HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the TileLayout TagHelper for ASP.NET Core (Demo)

See Also

• Using the Events of the TileLayout for ASP.NET Core (Demo)
• Knowledge Base Section