New to Telerik UI for ASP.NET Core? Download free 30-day trial

TileLayout Reordering

The Telerik UI TileLayout for ASP.NET Core allows you rearrange the position of the tile containers with drag and drop.

The reordering takes advantage of the CSS Grid mechanism and changes the css order of the item and lets the browser handle the rest.

Enabling the Reorderable Functionality of the TileLayout

To enable the reorderable feature of the TileLayout, set the Reorderable() method .

To use the Reorderable() functionality, define headers.

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

     @(Html.Kendo().TileLayout()
        .Name("tilelayout")
        .Columns(2)
        .RowsHeight("285px")
        .ColumnsWidth("285px")
        .Containers(c => {
            c.Add().Header(h => h.Text("Item one")).BodyTemplate("Item one body").ColSpan(1).RowSpan(1);
            c.Add().Header(h => h.Text("Item two")).BodyTemplate("Item two body").ColSpan(1).RowSpan(1);
            c.Add().Header(h => h.Text("Item three")).BodyTemplate("Item three body").ColSpan(1).RowSpan(1);
        })
        .Reorderable(true)
    )
     <kendo-tilelayout columns="2" columns-width="285px" reorderable="true" rows-height="285px" name="tilelayout">
        <containers>
            <container body-template="Item one body" col-span="1" row-span="1">
                <container-header text="Item one"/>
            </container>
            <container body-template="Item two body" col-span="1" row-span="1">
                <container-header text="Item two"/>
            </container>
            <container body-template="Item three body" col-span="1" row-span="1">
                <container-header text="Item three"/>
            </container>
        </containers>
    </kendo-tilelayout>   

Event Handling

The widget triggers a Reorder() event which provides access to the reordered container, the old and the new index.

    .Events(e=>e.Reorder("onReorder"))

    function onReorder (e) {
        console.log(e.newIndex, e.oldIndex);
    }
    <kendo-tilelayout name="tilelayout" columns="3" reorderable="true" on-reorder="onReorder">
    <script>
        function onReorder(e) {
            console.log(e.newIndex, e.oldIndex);
        }
    </script>

See Also

In this article