New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Add or Remove Tiles

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 JS 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.

  $("#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.

Add or Remove Tiles

Usage

See Also