jQuery UI Widgets Forums Layouts Layout and Docking Layout Problems persisting docking layout

This topic contains 4 replies, has 3 voices, and was last updated by  cainellin 3 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Problems persisting docking layout #89704

    Bogdan W.
    Participant

    Hi there,
    It appears that there are still some problems with persisting layout data.
    I used your code (from Reply# #83761, 04/21/2016, post “modifying jqxdockinglayout content”) for “copyItem” function to eliminate circular references issues. It works fine, however, I found other problems:
    1.
    Missing “contentContainer” parameter in some cases after calling “SaveLayout” method.
    2.
    Empty group resulting in “grayed areas” on page.

    Below is the code which illustrate these problems.
    To get problem 1 drag “CalendarPanel” to the topmost horizontal position, then click “SaveLayout” and “LoadLayout” buttons in this order.
    You will notice that “CalendarPanel” text disappears; it is because “SaveLayout” method returned object does not contain property for “contentContainer”.
    To duplicate problem 2 remove (i.e. start dragging to get “floating window” and then click “x”) “TaskPanel” and “DiscussionPanel”.
    Then try to extend “CalendarPanel” to fill the whole window. It stops around 80% of the width. The reason seems to be that there is empty items group
    in layout object returned from “SaveLayout” which has width set to (about) 20% of screen.
    In fact, there is another issue here, if you click now “SaveLayout” following with “LoadLayout” removed windows pop up as floated.
    Here is the code:

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title>
    DockingLayout Demo
    </title>
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />

    <script type=”text/javascript” src=”scripts/jquery-2.1.4.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxribbon.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxlayout.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdockinglayout.js”></script>

    </head>
    <body>

    <div class=”av-layout” style=”width: 100%; height: 100%; margin: 0px;”>
    <div id=”jqxDockingLayout”>
    <div data-container=”CalendarPanel”>
    <div style=”width: 100%; height: 100%; position: relative;”>
    CalendarPanel
    </div>
    </div>
    <div data-container=”TaskPanel”>
    <div style=”width: 100%; height: 100%; position: relative;”>
    TaskPanel
    </div>
    </div>
    <div data-container=”DiscussionPanel”>
    <div style=”width: 100%; height: 100%; position: relative;”>
    DiscussionPanel
    </div>
    </div>
    </div>
    </div>

    <div>
    <input type=”button” value=”Save Layout” id=’saveLayout’ />
    </div>
    <div>
    <input type=”button” value=”Load Layout” id=’loadLayout’ />
    </div>
    <div>
    <input type=”button” value=”Load Default Layout” id=’loadDefaultLayout’ />
    </div>

    <script type=”text/javascript”>

    $(document).ready(function () {

    var defaultLayoutStr = ‘[{“type”:”layoutGroup”,”orientation”:”horizontal”,”items”:[{“type”:”documentGroup”,”orientation”:”vertical”,”height”:”100%”,”width”:”30%”,”minHeight”:200,”allowClose”:false,”allowPin”:false,”items”:[{“type”:”documentPanel”,”title”:”Calendar”,”allowClose”:false,”allowPin”:false,”contentContainer”:”CalendarPanel”,”index”:0,”selected”:true}],”index”:0},{“type”:”layoutGroup”,”orientation”:”vertical”,”width”:”70%”,”items”:[{“type”:”documentGroup”,”height”:”50%”,”minHeight”:200,”allowClose”:false,”allowPin”:false,”items”:[{“type”:”documentPanel”,”title”:”Tasks”,”allowClose”:false,”allowPin”:false,”contentContainer”:”TaskPanel”,”index”:0,”selected”:true}],”index”:0},{“type”:”documentGroup”,”height”:”50%”,”minHeight”:200,”allowClose”:false,”allowPin”:false,”items”:[{“type”:”documentPanel”,”title”:”Discussions”,”contentContainer”:”DiscussionPanel”,”allowClose”:false,”allowPin”:false,”index”:0,”selected”:true}],”index”:1}],”index”:1}],”index”:0}]’;
    var layoutObj = null;
    var layoutStr = null;

    var layout = [
    {
    type: ‘layoutGroup’,
    orientation: ‘horizontal’,
    items: [
    {
    type: ‘documentGroup’,
    orientation: ‘vertical’,
    height: ‘100%’,
    width: ‘30%’,
    minHeight: 200,
    allowClose: false,
    allowPin: false,
    items: [
    {
    type: ‘documentPanel’,
    title: ‘Calendar’,
    allowClose: false,
    allowPin: false,
    contentContainer: ‘CalendarPanel’
    }
    ]
    },
    {
    type: ‘layoutGroup’,
    orientation: ‘vertical’,
    width: ‘70%’,
    items: [
    {
    type: ‘documentGroup’,
    height: ‘50%’,
    minHeight: 200,
    allowClose: false,
    allowPin: false,
    items: [
    {
    type: ‘documentPanel’,
    title: ‘Tasks’,
    allowClose: false,
    allowPin: false,
    contentContainer: ‘TaskPanel’
    }
    ]
    },
    {
    type: ‘documentGroup’,
    height: ‘50%’,
    minHeight: 200,
    allowClose: false,
    allowPin: false,
    items: [
    {
    type: ‘documentPanel’,
    title: ‘Discussions’,
    contentContainer: ‘DiscussionPanel’,
    allowClose: false,
    allowPin: false
    }
    ]
    }
    ]
    }
    ]
    }
    ];

    $(‘#jqxDockingLayout’).jqxDockingLayout({ width: 800, height: 500, layout: layout });
    $(“#saveLayout”).jqxButton({ width: ‘150px’, height: ’35px’ });
    $(“#saveLayout”).on(‘click’, function (e) {
    layoutObj = $(‘#jqxDockingLayout’).jqxDockingLayout(‘saveLayout’);
    var savedLayout = [];
    for (var i = 0; i < layoutObj.length; i++) {
    copyItem(layoutObj[i], savedLayout);
    }
    layoutStr = JSON.stringify(savedLayout);
    });

    $(“#loadLayout”).jqxButton({ width: ‘150px’, height: ’35px’ });
    $(“#loadLayout”).on(‘click’, function (e) {
    $(‘#jqxDockingLayout’).jqxDockingLayout(‘loadLayout’, JSON.parse(layoutStr));
    });

    $(“#loadDefaultLayout”).jqxButton({ width: ‘150px’, height: ’35px’ });
    $(“#loadDefaultLayout”).on(‘click’, function (e) {
    $(‘#jqxDockingLayout’).jqxDockingLayout(‘loadLayout’, JSON.parse(defaultLayoutStr));
    });

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

    </script>
    </body>
    </html>

    Thx,
    Bogdan

    Problems persisting docking layout #89712

    Dimitar
    Participant

    Hi Bogdan,

    Please note that our solution from here: http://www.jqwidgets.com/community/topic/modifying-jqxdockinglayout-content/#post-83761 is a workaround that was created ad hoc for the specific requirements presented in that forum topic. It does not represent an officially supported feature of the jqxDockingLayout widget and unexpected behaviour can occur when running it.

    The “empty layout group” behaviour is not related, however. In certain cases, it is normal for a layout group to remain empty after all of its child panels have been floated or closed. This depends on the relative position of the group to other layout groups. The empty group can, however, be populated by dragging panels into it. We agree that this behaviour can be improved, though, and will consider a better handling of empty layout groups, especially ones that are automatically created.

    Best Regards,
    Dimitar

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

    Problems persisting docking layout #89729

    Bogdan W.
    Participant

    Hi Dimitar,
    well, “layout” is useful only if it can be persisted. If user has to recreated page layout each time after page loads then it does not make much sense.
    My understanding was that “saveLayout”/”loadLayout” methods are for this purpose, i.e. getting “layout” object from “saveLayout” then serializing it, saving in the database, and reloading via “loadLayout” on the way back.
    Is there another way of getting “layout” object?
    How should one create a persistent, user configurable layout using jqxWidgets?

    Thx,
    Bogdan

    Problems persisting docking layout #89757

    Dimitar
    Participant

    Hi Bogdan,

    Unfortunately, the serialization of the object resulting from saveLayout cannot be reliably achieved, because of the use of widgets (cyclic objects) initialized inside the panels of jqxDockingLayout. That is why saveLayout and loadLayout work best as shown in the demo on the matter: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdockinglayout/javascript-docking-layout-save-load.htm?light.

    This behaviour can, of course, be improved in the future, but in any case information about inner widgets will be lost.

    On the whole, thank you for your valuable feedback.

    Best Regards,
    Dimitar

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

    Problems persisting docking layout #90420

    cainellin
    Participant

    Hi Borgdan,

    I have the same problem, in some cases missing “contentContainer”.
    NB: in my project the “data-container” div has the same name of the property “title” of layout.

    My workaround based on http://www.jqwidgets.com/community/topic/modifying-jqxdockinglayout-content/#post-83761 is this:

    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 {
    if (property !== ‘docked’)
    current[property] = object[property];
    if (property == ‘title’ && object[‘contentContainer’] == undefined)
    current[‘contentContainer’] = current[‘title’];
    }
    }
    }
    target.push(current);
    };

    I hope this will help you

    Nicola

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

You must be logged in to reply to this topic.