TileLayout Reordering
The Kendo UI TileLayout widget allows you to rearrange the position of the tile containers with drag and drop and 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 Click-Move-Click
As of Kendo UI 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.
<script id="first" type="text/x-kendo-template">
<h3>A</h3>
</script>
<script id="second" type="text/x-kendo-template">
<h3>B</h3>
</script>
<div id="tilelayout"></div>
<script>
$("#tilelayout").kendoTileLayout({
containers: [
{
colSpan: 1,
rowSpan: 1,
header: {
text: "Item one"
},
bodyTemplate: kendo.template($("#first").html())
},
{
colSpan: 1,
rowSpan: 1,
header: {
text: "Item two"
},
bodyTemplate: kendo.template($("#second").html())
}
],
columns: 4,
reorderable: {
clickMoveClick: true
}
});
</script>
Enabling Drag and Drop
To allow users to reorder tyles by dragging and dropping them, set the reorderable property to true.
To use the
reorderablefunctionality, define headers.
The example below will render a grid with two columns which can be reordered both vertically and horizontally.
<div id="tilelayout"></div>
<script>
$("#tilelayout").kendoTileLayout({
containers: [{
colSpan: 1,
rowSpan: 1,
header: {
text: "Item one"
},
bodyTemplate: "Item one body"
}, {
colSpan: 1,
rowspan: 1,
header: {
text: "Item two"
},
bodyTemplate: "Item two body"
}, {
colSpan: 1,
rowspan: 1,
header: {
text: "Item three"
},
bodyTemplate: "Item three body"
}],
columns: 3,
height: 200,
reorderable: true
});
</script>
Event Handling
The widget triggers a reorder event which provides access to the reordered container, the old and the new index.
reorder: function (e) {
console.log(e.newIndex, e.oldIndex);
}