New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Add or Remove Tiles
Updated on Sep 23, 2025
The Kendo UI TileLayout component supports the option to dynamically add and remove tiles.
Usage
This functionality is a custom implementation based on the splice() JavaScript array method and the setOptions() TileLayout client-side method.
The example below demonstrates how you can enable users to remove a tile from the TileLayout by a clicking on its close button.
JS
$("#tilelayout").on("click", ".k-button", function (e) { var tilelayout = $("#tilelayout").data("kendoTileLayout"); var itemId = $(e.currentTarget).closest(".k-tilelayout-item").attr("id"); var mainItems = tilelayout.items; var item = tilelayout.itemsMap[itemId]; mainItems.splice(mainItems.indexOf(item), 1); item.colSpan = 1; recreateSetup(mainItems); }); function recreateSetup(mainItems) { var tilelayout = $("#tilelayout").data("kendoTileLayout"); for (var i = 0; i < mainItems.length; i++) { if (mainItems[i]) { mainItems[i].order = i; } } tilelayout.setOptions({ containers: mainItems }); }For a full implementation of the Add/Remove functionality please refer to the official Add/Remove demo page.