Dockmanager save and restore layout

[Yohann]

Hi,

How to save the layout of the dockmanager ? I need to restore panels in the right place.

Best regards

[Anton Mironov]

Hi Yohann,

Thank you for the details provided.

As I already answered the duplicated requirement in a support ticket, will paste the solution here as well. Please keep the communication in one place.

The pointed functionality is not available built-in, but we can achieve it with custom functions.

In order to save and load the state of the panes, I decided to use two buttons - save state and load state:

@(Html.Kendo().Button()
    .Name("saveDock")
    .ThemeColor(ThemeColor.Primary)
    .Content("Save state")
    .Events(e => e.Click("saveState"))
)

@(Html.Kendo().Button()
    .Name("loadDock")
    .ThemeColor(ThemeColor.Primary)
    .Content("Load state")
    .Events(e => e.Click("loadState"))
)

Feel free to use the Events of the DockManager to save the state if needed:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/dockmanager#events

Here is the JavaScript that I used for saving and loading the state of the Panes for the DockManager:

    var savedState;

    function saveState() {
        var dockManager = $("#dockmanager").data("kendoDockManager");
        savedState = extractPaneConfig(dockManager.options.rootPane);
    }

    function loadState() {
        var dockManager = $("#dockmanager").data("kendoDockManager");
        dockManager.setOptions({ rootPane: savedState });
        restoreContent(dockManager.options.rootPane, savedState);
    }

    function extractPaneConfig(pane) {
        var config = {
            id: pane.id,
            type: pane.type,
            size: pane.size,
            title: pane.title,
            orientation: pane.orientation,
            closeable: pane.closeable,
            unpinnable: pane.unpinnable,
            content: $("#" + pane.id).html(), 
            panes: []
        };

        if (pane.panes && pane.panes.length > 0) {
            pane.panes.forEach(function(childPane) {
                config.panes.push(extractPaneConfig(childPane));
            });
        }

        return config;
    }

    function restoreContent(currentPane, savedPane) {
        if (savedPane.content) {
            $("#" + savedPane.id).html(savedPane.content); 
        }

        if (savedPane.panes && savedPane.panes.length > 0) {
            for (var i = 0; i < savedPane.panes.length; i++) {
                restoreContent(currentPane.panes[i], savedPane.panes[i]);
            }
        }
    }

In the code above, we get the settings of al the panes recursively and keep it in the "savedState" global scope variable.
After this, we can use the saved state for loading it again when we click the load state button.

Here is a REPL example that I prepared for the case. It implements the approach above:

• https://netcorerepl.telerik.com/cpkFFkkN08eiAWWi04
  

 

Kind Regards,
Anton Mironov

[Yohann]

Hi,

Thanks for your sample but I have noticed some errors.

Indeed,  i dock "Representative sale vs total sale" to the left, i save state.

When i load state, i have the pane "Representative sale vs total sale" twice.

After this effect, the most annoying thing is that there are javascript errors when i try to dock a pane :

 

 

Kind regards,

Yohann

[Anton Mironov]

Hi Yohann,

Thank you for the additional details provided.

As pointed in my previous reply, the described functionality is not built-in. We have to add custom scripts and double-check and update the logic if needed.

The issue of duplicate panes when restoring a saved state in the Kendo DockManager setup occurs because the setOptions method merges the saved configuration with the existing state, rather than replacing it entirely. As a result, the previously existing panes remain in the DOM, and the new ones are added, leading to duplication.

In order to reapply the saved settings, i would recommend to destroy the DockManager and re-initialize it with the saved settings.

Here is an example:

function loadState() {
    var dockManager = $("#dockmanager").data("kendoDockManager");

    dockManager.destroy();

    $("#dockmanager").kendoDockManager({
        rootPane: savedState
    });

    restoreContent(savedState, savedState);
}

Here is the updated REPL example:

• https://netcorerepl.telerik.com/cTYbPpld05AB9lEM51

Feel free to add more functionalities or update the current ones if needed.

 

Best Regards,
Anton