jQuery UI Widgets Forums Layouts Layout and Docking Layout modifying jqxdockinglayout content

This topic contains 11 replies, has 2 voices, and was last updated by  flynnbe 4 years, 1 month ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • modifying jqxdockinglayout content #83442

    flynnbe
    Participant

    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

    modifying jqxdockinglayout content #83452

    Dimitar
    Participant

    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/

    modifying jqxdockinglayout content #83481

    flynnbe
    Participant

    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

    modifying jqxdockinglayout content #83483

    Dimitar
    Participant

    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/

    modifying jqxdockinglayout content #83486

    flynnbe
    Participant

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

    modifying jqxdockinglayout content #83517

    Dimitar
    Participant

    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/

    modifying jqxdockinglayout content #83529

    flynnbe
    Participant

    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

    modifying jqxdockinglayout content #83571

    Dimitar
    Participant

    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/

    modifying jqxdockinglayout content #83755

    flynnbe
    Participant

    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

    modifying jqxdockinglayout content #83761

    Dimitar
    Participant

    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/

    modifying jqxdockinglayout content #83764

    flynnbe
    Participant

    Thanks, I’ll give it a try.

    modifying jqxdockinglayout content #83816

    flynnbe
    Participant

    Yep that’s done it. Thanks very much.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.