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

TileLayout Resizing

The Kendo UI TileLayout widget allows you resize the containers by snapping to the available columns and row units. When enabled the user is able to alter the width or the height of a current item.

The resizing takes advantage of the CSS Grid mechanism, meaning that the widget increases how the element spans and the browser takes care of how to re-arrange the items if necessary.

Note: When resizable is enabled items should have a defined rowSpan and colSpan.

Enabling the resizable feature of the TileLayout

To enable the resizable feature of the TileLayout, set the resizable property to true.

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

    <div id="tilelayout"></div>

    <script>
        $("#tilelayout").kendoTileLayout({
            containers: [{
                colSpan: 1,
                rowSpan:1,
                bodyTemplate: "Item one body"
            }, {
                colSpan: 1,
                rowspan:1,
                bodyTemplate: "Item two body"
            }],
            columns: 3,
            height: 200,
            resizable: true
        });
    </script>

Event Handling

The widget triggers a resize event which provides access to the resized container.

    resize: function (e) {
        console.log(e.container);
    }

See Also

In this article