How to save tilelayout and reload this in later

[duy]

Hi !

I using telerik jquery , when i using tilelayout, i like action as : Drag, drop. 

 

But I want to save layout and reload it in later.

 

Please help me to do it !

 

tks !

[Nikolay]

Hello Duy,

It is possible to save the TileLayout state to the local storage via getOptions and setOptions methods

//save the options
var options = $("#tilelayout").getKendoTileLayout().getOptions();
var stringOptions = JSON.stringify(options);
localStorage["kendo-tilelayout-options"] = stringOptions;
...
//  load the options
var options = localStorage["kendo-tilelayout-options"];
 if (options) {
      var deserializedOptions = JSON.parse(options, Function.deserialise);
      var layout = $("#tilelayout").getKendoTileLayout();
      layout.setOptions(deserializedOptions);
}

The above can be examined live in the following Dojo demo:

• https://dojo.telerik.com/APeriMIX

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Jimmy]

HI

How do I save the order only without the template contents?

The contents is dynamic from database for each items. So I just need to restore the items order but load the contents from database.

Thank you.

[Nikolay]

Hello Jimmy,

By design. the getOptions() method obtains the full options object. However, you can modify the options object before passing it to the setOptions() method.
The order or the tiles is positioned in containers.order and so you can modify the options object to use the order passed from the getOptions and use the database information for the rest of the containers data

Let me know if you have any questions.

Regards,

Nikolay

[Jimmy]

Thank you! Managed to save the order only.

[Nikolay]

Hi Jimmy,

You are most welcome. I am glad to hear you have managed to resolve this and move on further.

Regards,

Nikolay

[Venkat]

Hi Nikolay,

Can you provide sample code on how to retain order of the tiles only?

[Nikolay]

Hi Venkat,

This could be done by just passing the TileLayout containers to localStorage instead of the whole option object:

$("#save").click(function (e) {
              e.preventDefault();
              var options = $("#tilelayout").getKendoTileLayout().getOptions();
              let containers = options.containers;
              localStorage.setItem("containers", JSON.stringify(containers));
            });

            $("#load").click(function (e) {
              e.preventDefault();
              var storedContainers = JSON.parse(localStorage.getItem("containers"),  Function.deserialise);
             
              if (storedContainers) {
                var layout = $("#tilelayout").getKendoTileLayout();
                layout.setOptions({
                  containers: storedContainers
                });
              }
            });

Dojo demo: https://dojo.telerik.com/APeriMIX/90

Regards,

Nikolay

 

[duy]

Oh. many thanks Nikolay !

 

This is correctly i find. But can you show me the documentation reference to do it.

I have read the document carefully but cannot find it.

Thanks you verry much !

[Nikolay]

Hi Duy,

You are most welcome. 

Unfortunately, this is not present in the documentation, however, I will ensure it gets included as it is quite a valuable resource. Thank you for pointing it out.

Please contact us back if anything new arises.

Regards,
Nikolay
Progress Telerik

[Sri]

Does Kendo UI for Angular provides the same functionality (Saving the State)?

[Nikolay]

Hello Sri K,

Are you referring to the Kendo UI library for Angular or it is for the TileLayout for AngularJS?

In case it is the latter the answer is yes and the logic for saving the tiles remains the same as it is in JavaScript.

For Kendo UI for Angular, I recommend submitting a thread to the respective forum as this is an entirely different product that I am not familiar with.

• https://www.telerik.com/forums/kendo-angular-ui

Regards,
Nikolay
Progress Telerik