jQuery UI Widgets Forums Layouts Docking Docking Persistence

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Docking Persistence #47972

    vespagym
    Participant

    Are there any built in methods for keeping track of docking persistence other than using a separate cookie for each docking instance? I believe having too many cookies per domain will cause issues.

    Docking Persistence #47989

    Dimitar
    Participant

    Hello vespagym,

    You can call exportLayout to save the docking’s layout into a JSON string and importLayout to load it at a later time. Please check out the demo Import Layout to see the latter method in action.

    Best Regards,
    Dimitar

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

    Docking Persistence #48752

    vespagym
    Participant

    I’m trying to get the columns rendered correctly when the panels have been moved around. I’ve swapped the top two panels and when the page is refreshed the right column shifts below the left column. If cookies are used instead of importLayout, the page renders correctly with two columns. Does anyone know the reason?

    The panels should render in two columns as
    TR|TL
    BL|

    but they render as:
    TR
    BL
    TL

    <html>
    <head>
    <link rel="stylesheet" href="js50/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="js50/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script src="js50/jquery/jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
    <script src="js50/jqwidgets/jqxcore.js" language="javascript" type="text/javascript"></script>
    <script src="js50/jqwidgets/jqxdocking.js" language="javascript" type="text/javascript"></script>
    <script src="js50/jqwidgets/jqxwindow.js" language="javascript" type="text/javascript"></script>
    <script>
    $(document).ready(function () {
        $('#docking').jqxDocking({ width: '100%', theme: 'classic', orientation: 'horizontal', mode: 'docked' });
        $('#docking').jqxDocking('showAllCollapseButtons');
        $('#docking').jqxDocking('hideAllCloseButtons');
        $('#docking').jqxDocking('importLayout', '{"panel0": {"windowTr":{"collapsed":false},"windowBl":{"collapsed":false}},"panel1": {"windowTl":{"collapsed":false}},"floating":{},"orientation": "horizontal"}');
    });
    </script>
    </head>
    <body>
    	<div id="docking">
    		<div style="width: 50%">
    			<div id="windowTl">
    				<div>Top Left</div>
    				<div id="toggleTl" style="height:310px;display:block;overflow:auto"></div>
    			</div>
    			<div id="windowBl">
    				<div>Bottom Left</div>
    				<div id="toggleBl" style="height:150px;display:block;overflow:auto"></div>
    			</div>
    		</div>
    		<div style="width: 50%">
    			<div id="windowTr">
    				<div>Top right</div>
    				<div id="toggleTr" style="height:310px;display:block;overflow:auto"></div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    Docking Persistence #49075

    Dimitar
    Participant

    Hi vespagym,

    We tested your code and the displayed layout is the intended one:

    TR|TL
    BL|

    Please make sure you are using the latest version of jQWidgets (3.2.1).

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.