modifying jqxdockinglayout content

[flynnbeParticipant]

Hi, how do I add/modify content which is contained within a document panel in a jqxdockinglayout control after the jqxdockinglayout control has rendered. i.e. How do I dynamically change jqxdockinglayout content.

Thanks, Brian

[DimitarParticipant]

Hi Brian,

Please share what kind of content you have in your document panel and we will try to give you the best solution. You can also take a look at the following forum topic, where a similar matter is discussed: http://www.jqwidgets.com/community/topic/modifying-layout-properties/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[flynnbeParticipant]

Hi Dimitar, my situation is similar the demo provided in that I have a jqxtree inside one of the panels. My problem is when handling a page refresh. I save the layout but when I try to load the saved layout after the refresh the jqxtree does not appear. In other words the layout retains all the information relating to panels (width, position, etc) but does not recreate the content.

I was hoping to work around this by inserting the jqxtree back into the panel once the layout had finished loading.

Thanks, Brian

[DimitarParticipant]

Hi Brian,

As can be seen from the demo Save/Load Layout, widgets (such as the jqxTree) are preserved after a call to loadLayout, but their state is not (e.g. selection is lost). This is the expected behaviour of the docking layout. The tree can disappear, however, if the saved layout has been somehow modified. Please share more details – how do you save the layout so that it is accessible after page reload? Is it using the HTML local storage?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[flynnbeParticipant]

Yes it’s local storage. The function ‘censor()’ removes each element that prevents the saved layout becoming stringified. I assume the problem is there. Is there an alternative way to storing layout across page refreshes?

var savedLayout = $(‘#jqxLayout’).jqxDockingLayout(‘saveLayout’);
var savedLayoutStringified = JSON.stringify(savedLayout, censor);
localStorage.setItem(“StoredLayout”, $(‘#jqxLayout’).jqxDockingLayout(‘saveLayout’));

function censor(key, value) {
if (key == “parent” | key == “current” | key == “host” | key == “element” | key == “elements” | key == “prevItem” | key == “treeInstance” | key == “owner” | key == “contentContainer”) {
return undefined;
}
return value;
}

[DimitarParticipant]

Hi flynnbe,

I am afraid that censor is indeed what causes the issue. Unfortunately, there is currently no way to preserve contained widgets and stringify the saved layout. My suggestion is to initialize a fresh docking layout every time the page is refreshed if you wish the tree to appear.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[flynnbeParticipant]

By initiating a fresh layout all the previous layout settings wold be lost? So there is no practical way to preserve layout state across postbacks? This is important to us as we are trialling the component at the moment and the dockinglayout control is not much use otherwise.

Thanks, Brian

[DimitarParticipant]

Hi flynnbe,

There is, unfortunately, no way to preserve the state of inner widgets, because, to do so, you would have to be able to store the jQuery objects of these widgets, which, however, causes the necessity to stringify circular structures.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[flynnbeParticipant]

Hi, I think you misunderstand. I am not looking to save the state of any content contained within the layout.

I’m looking for a way to preserve the layout of the dockinglayout widget so that I can then restore the layout of the dockingwidget (after a page refresh for example). I need to know then how to put the content back into the restored layout. For example – there is a layout with a tree in a panel, I save the layout (as a stringified JSON), the page is refreshed, the layout is reloaded, I then re-insert the tree into the panel..

Thanks, Brian

[DimitarParticipant]

Hi flynnbe,

I understand. This feature is supported, but unfortunately, JSON.stringify removes the callback function initContent from the saved layout object, thus not reinitializing the tree (or other widget) after loading the parsed string.

You can, however, try the following (ad hoc) workaround:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo shows how to save/load the current layout.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
        .jqx-layout-group-auto-hide-content-vertical {
            width: 200px;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlayout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initializeTree = function () {
                // initialize a jqxTree inside the Solution Explorer Panel
                var source = [{
                    icon: '../../images/earth.png',
                    label: 'Project',
                    expanded: true,
                    items: [{
                        icon: '../../images/folder.png',
                        label: 'css',
                        expanded: true,
                        items: [{
                            icon: '../../images/nav1.png',
                            label: 'jqx.base.css'
                        }, {
                            icon: '../../images/nav1.png',
                            label: 'jqx.energyblue.css'
                        }, {
                            icon: '../../images/nav1.png',
                            label: 'jqx.orange.css'
                        }]
                    }, {
                        icon: '../../images/folder.png',
                        label: 'scripts',
                        items: [{
                            icon: '../../images/nav1.png',
                            label: 'jqxcore.js'
                        }, {
                            icon: '../../images/nav1.png',
                            label: 'jqxdata.js'
                        }, {
                            icon: '../../images/nav1.png',
                            label: 'jqxgrid.js'
                        }]
                    }, {
                        icon: '../../images/nav1.png',
                        label: 'index.htm'
                    }]
                }];

                $('#solutionExplorerTree').jqxTree({ source: source, width: 190 });
            }

            // the 'layout' JSON array defines the internal structure of the layout
            var layout = [{
                type: 'layoutGroup',
                orientation: 'horizontal',
                items: [{
                    type: 'autoHideGroup',
                    alignment: 'left',
                    width: 80,
                    unpinnedWidth: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Toolbox',
                        contentContainer: 'ToolboxPanel'
                    }, {
                        type: 'layoutPanel',
                        title: 'Help',
                        contentContainer: 'HelpPanel'
                    }]
                }, {
                    type: 'layoutGroup',
                    orientation: 'vertical',
                    width: 500,
                    items: [{
                        type: 'documentGroup',
                        height: 400,
                        minHeight: 200,
                        items: [{
                            type: 'documentPanel',
                            title: 'Document 1',
                            contentContainer: 'Document1Panel'
                        }, {
                            type: 'documentPanel',
                            title: 'Document 2',
                            contentContainer: 'Document2Panel'
                        }]
                    }, {
                        type: 'tabbedGroup',
                        height: 200,
                        pinnedHeight: 30,
                        items: [{
                            type: 'layoutPanel',
                            title: 'Error List',
                            contentContainer: 'ErrorListPanel'
                        }, {
                            type: 'layoutPanel',
                            title: 'Output',
                            contentContainer: 'OutputPanel',
                            selected: true
                        }]
                    }]
                }, {
                    type: 'tabbedGroup',
                    width: 220,
                    minWidth: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Solution Explorer',
                        contentContainer: 'SolutionExplorerPanel',
                        initContent: initializeTree
                    }, {
                        type: 'layoutPanel',
                        title: 'Properties',
                        contentContainer: 'PropertiesPanel'
                    }]
                }]
            }];

            $('#jqxLayout').jqxLayout({ width: 800, height: 600, layout: layout, contextMenu: true });

            var copyItem = function (object, target) {
                var current = {};
                for (var property in object) {
                    if (object.hasOwnProperty(property) && property !== 'detachedContent') {
                        if (property === 'items') {
                            var currentItems = [];
                            for (var i = 0; i < object.items.length; i++) {
                                copyItem(object.items[i], currentItems);
                            }
                            current.items = currentItems;
                        } else {
                            current[property] = object[property];
                        }
                    }
                }
                target.push(current);
            };

            $('#saveLayoutButton').jqxButton();
            $('#loadLayoutButton').jqxButton({ disabled: true });

            var savedLayout;

            $('#saveLayoutButton').click(function () {
                var initialSavedLayout = $('#jqxLayout').jqxLayout('saveLayout');
                savedLayout = [];
                for (var i = 0; i < initialSavedLayout.length; i++) {
                    copyItem(initialSavedLayout[i], savedLayout);
                }
                savedLayout = JSON.stringify(savedLayout);

                $('#loadLayoutButton').jqxButton({ disabled: false });
            });

            $('#loadLayoutButton').click(function () {
                var parsedString = JSON.parse(savedLayout);

                $('#jqxLayout').jqxLayout('loadLayout', parsedString);
                $('#loadLayoutButton').jqxButton({ disabled: true });
                initializeTree();
            });
        });
    </script>
</head>
<body>
    <div id="jqxLayout">
        <!--The panel content divs can have a flat structure-->
        <!--autoHideGroup-->
        <div data-container="ToolboxPanel">
            List of tools
        </div>
        <div data-container="HelpPanel">
            Help topics
        </div>
        <!--documentGroup-->
        <div data-container="Document1Panel">
            Document 1 content
        </div>
        <div data-container="Document2Panel">
            Document 2 content
        </div>
        <!--bottom tabbedGroup-->
        <div data-container="ErrorListPanel">
            List of errors
        </div>
        <div data-container="OutputPanel">
            Output
        </div>
        <!--right tabbedGroup-->
        <div data-container="SolutionExplorerPanel">
            <div id="solutionExplorerTree" style="border: none;">
            </div>
        </div>
        <div data-container="PropertiesPanel">
            List of properties
        </div>
    </div>
    <div style="margin-top: 25px;">
        <button id="saveLayoutButton" style="float: left; margin-right: 10px;">
            Save layout
        </button>
        <button id="loadLayoutButton" style="float: left;">
            Load layout
        </button>
    </div>
</body>
</html>

Please note the copyItem function and the code in the loadLayoutButton click event handler.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[flynnbeParticipant]

Thanks, I’ll give it a try.

[flynnbeParticipant]

Yep that’s done it. Thanks very much.

[Author]

Posts