TileLayout Reordering
The Telerik UI TileLayout for ASP.NET MVC allows you to rearrange the position of the tile containers either with drag and drop or click-move-click.
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 Click-Move-Click Functionality
As of Telerik UI for ASP.NET MVC R2 SP1 2023, users can reorder the TileLayout's containers by using the click-move-click functionality provided by the Reorderable.ClickMoveClick() option. Users can click a container to start moving it, and then click again to place it in its new position.
@(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(reorderable=>reorderable.ClickMoveClick(true))
)
Enabling the Drag and Drop Functionality
To enable the reorderable feature of the TileLayout, set the Reorderable() method
and pass true as a parameter.
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)
)
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);
}