TileLayout remove tile not work

2 Answers 106 Views
TileLayout
FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
FranckSix asked on 09 Jun 2023, 10:26 PM

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
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 12 Jun 2023, 02:01 PM

Hi

For help I created a demo project

2 Answers, 1 is accepted

Sort by
1
Eyup
Telerik team
answered on 14 Jun 2023, 11:38 AM

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

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 16 Jun 2023, 08:19 PM | edited

Thank you Eyup,

It works the layout updates as expected.

0
FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 20 Jun 2023, 04:01 PM

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
Telerik team
commented on 21 Jun 2023, 02:49 PM

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();
}

Tags
TileLayout
Asked by
FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Eyup
Telerik team
FranckSix
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or