TileLayout remove tile not work

[FranckSix]

Hi,

I created a TileLayout with MVC 

@(Html.Kendo().TileLayout()
   .Name("zoneWorkflow").Columns(1)
   .Gap(g => g.Columns(8).Rows(8))
   .Columns(1)
   .Reorderable(true)
   .Resizable(true)
   .HtmlAttributes(new { Title = this.LocalResources("LegendeEtapes") })
   .RowsHeight("auto"))

On the header template I added a button to remove tile with handle to

removeOperationBox(e) { // e is a KendoButton into Header tile
   const itemId = e.sender.element.parents("div[role='listitem']").attr("id");
   const workflow = $("#zoneWorkflow").data("kendoTileLayout");
   const index = workflow.items.findIndex(i => i.id === itemId);
   workflow.items.splice(index, 1);
}

The splice method work perfectly the item was removed from collection. But the relative Tile in the Layout not removed from view. If I repeat the call for button for this tile the index is equal to -1 (because is not in the items collection anymore).

I tried the example of remove from Add / Remove TileLayout but this operation remove all jquery listeners from remaining tiles.

Thanks

[FranckSix]

Hi

For help I created a demo project

[Eyup]

Hello,

 

Thank you for getting back to us.

In order to achieve this requirement, you will need to also refresh the TileLayout by calling the .setOptions() method, as demonstrated here:
https://demos.telerik.com/aspnet-mvc/tilelayout/add-remove

In your project it would look like this:

   removeOperationBox(e) {
       var itemId = $(e.currentTarget).closest(".k-tilelayout-item").attr("id");
       var mainLayout = $("#zoneWorkflow").data("kendoTileLayout");
       var mainItems = mainLayout.items;
       var item = mainLayout.itemsMap[itemId];

       mainItems.splice(mainItems.indexOf(item), 1);

       mainLayout.setOptions({ containers: mainItems });
   }

And now deleting the items works properly:

Can you give this solution a try and let me know how it goes?

 

Regards,
Eyup
Progress Telerik

[FranckSix]

Thank you Eyup,

It works the layout updates as expected.

[FranckSix]

Hi,

I have another problem with TileLayout...

After deleting a tile, all changes to existing tiles are lost. Same thing when I add new tile.

I also had to attach again javascript events to controls inside the tile (only in case the event is attached by JQuery. The events from MVC Controls still working). To bypass I added the binding event after adding or removing tile.

But I dont have workaround for lost changes. Is there an easy way to keep changes made to tiles before tile deletion processes.

Thanks!

 

[Ivan Danchev]

Hi FranckSix,

The changes in the other tiles are lost, because the setOptions method re-initializes the TileLayout, so the tile will looks as if the page was just loaded.

As a workaround, consider only hiding the tiles, instead of removing them from the TileLayout. This would not require calling the setOptions method. The logic in the button's click handler would look like this:

function removeOperationBox(e) {
    e.sender.element.closest(".k-tilelayout-item").hide();
}