Allow user to save tile layout view

1 Answer 305 Views
GridLayout TileLayout
Jack
Top achievements
Rank 1
Jack asked on 13 Jun 2023, 04:05 PM

I want to give my users the ability to reorder / resize the tiles and the layout, save that as a view,  set a default view and then have the option to choose any saved view in the future that auto loads that grid layout.

 

1 Answer, 1 is accepted

Sort by
0
Yanmario
Telerik team
answered on 16 Jun 2023, 07:22 AM

Hi Jack,

There is no inherent mechanism or demonstration available that can save and load the state of the TileLayout elements. What could be done is to handle the reorder event and the developer needs to manually reorder the underlying object within the component array based on the TileLayoutReorderEvent newCol, newRow, and newIndex properties.

In addition, I will suggest handling the resize event too, in case the size should be stored as well. Use *ngFor to configure the component, as this will give full control over the tiles rendering:

https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-collection/

The `TileLayoutReorderEvent` argument, passed with the `reorder` event of the TileLayout component, exposes a collection of all `TileLayoutItemcomponents in their current (not new) order under the `items` property. Fortunately, I can offer a solution based on this collection that will allow the new order of all available items to be extracted by using a `setTimeout` and then reading the `order` property of each collection item:

public onReorder(event: TileLayoutReorderEvent) {
  setTimeout(() => {
    console.log(event.items.map((item) => item.order));
  });
}

Please have in mind that using a `setTimeout` is needed because at the moment when the `reorder` event is thrown, the items `order` is still unchanged as the event can be prevented, and directly accessing the `items` property will not yield the desired results.

I hope this helps.

Regards,
Yanmario
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Tags
GridLayout TileLayout
Asked by
Jack
Top achievements
Rank 1
Answers by
Yanmario
Telerik team
Share this question
or