New to Kendo UI for jQuery? Start a free 30-day trial

Reorder

events

Fired when a tile item is reordered.

reorder

Event Data

e.container `jQuery`

A jQuery object representing the reordered item.

e.newIndex `Number`

A number indicating the new index of the item.

e.oldIndex `Number`

A number indicating the old index of the item.

e.sender `kendo.ui.TileLayout`

The widget instance which fired the event.

<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: true,
    reorder: function (e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log(e.newIndex, e.oldIndex);
    }
});
</script>

Reorder

reorder

Event Data

e.container jQuery

e.newIndex Number

e.oldIndex Number

e.sender kendo.ui.TileLayout

e.container `jQuery`

e.newIndex `Number`

e.oldIndex `Number`

e.sender `kendo.ui.TileLayout`