jQuery UI Widgets › Forums › Layouts › Layout and Docking Layout › Retrieving layout after it is saved using JSON.stringify(savedLayout)

Tagged: , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 7 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Retrieving layout after it is saved using JSON.stringify(savedLayout) Posts
  • June 30, 2017 at 11:18 am Retrieving layout after it is saved using JSON.stringify(savedLayout) #94632

    Ojas Jakhi
    Participant

    Hi,

    While using save/load docking layout, I am facing the following problems.
    While saving the layout, I am adding the ‘savedLayout’ in database using JSON.stringify(savedLayout).

    While retrieving the saved layout, I am not able to use $(‘#jqxDockinglayout’).jqxDockingLayout(‘loadLayout’, savedlayout).
    Instead I used $(‘#jqxDockinglayout’).jqxDockingLayout({ width: ‘100%’, height: ‘100%’, layout: savedlayout});

    This is working fine if just the height and width of the panels is changed before saving the layout.
    But if the any of the panels is removed from their original position and docked into some other position, it is not possible to load the layout by either of the above methods.
    I am getting the following exception in that case.

    Uncaught TypeError: m[B].appendTo is not a function
    at a.(anonymous function)._createLayout (jqxlayout.js:6:16792)
    at a.(anonymous function)._createLayout (jqxlayout.js:6:16894)
    at a.(anonymous function)._createLayout (jqxlayout.js:6:16894)
    at a.(anonymous function)._createLayout (jqxlayout.js:6:16894)
    at a.(anonymous function).render (jqxlayout.js:6:2056)
    at a.(anonymous function).createInstance (jqxlayout.js:6:732)
    at Object.a.jqx.applyWidget (jqxcore.js:8:24350)
    at HTMLDivElement.<anonymous> (jqxcore.js:8:28570)
    at Function.each (jquery.js:94:21)
    at jQuery.fn.init.each (jquery.js:36:46)

    I need that the saved layout is loaded every time the user lands on this page.

    Please find the below code.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=”mainPage”>Landing Page</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <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/jqxwindow.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlayout.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdockinglayout.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxtree.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var savedLayout = {};
    var mainLayout = {};
    var defaultLayout = {};

    jQuery(document).ready(function() {

    $.ajax({
    method : “GET”,
    cache : false,
    url : CONTEXT_ROOT + “/ResourceFile/loadLayout”,
    success : function(response, status, jqXHR) {
    savedLayout = response;
    if(savedLayout !== “”){
    mainLayout = savedLayout;
    }else{
    createLayout();
    mainLayout = defaultLayout;
    }
    $(‘#jqxDockingLayout’).jqxDockingLayout({ width: ‘100%’, height: ‘100%’, layout: mainLayout, theme: ‘energyblue’});
    },
    error : function(jqXHR, status, errorThrown) {
    alert(“Error: Status – ” + status + “, Message – ” + errorThrown);
    },
    complete : function() {}
    });

    $(‘#saveLayoutButton’).jqxButton();
    $(‘#graph1’).append(<div>GRAPH1</div>);
    $(‘#graph2’).append(<div>GRAPH2</div>);
    $(‘#graph3’).append(<div>GRAPH3</div>);
    $(‘#graph4’).append(<div>GRAPH4</div>);
    }

    $(‘#saveLayoutButton’).click(function () {
    savedLayout = $(‘#jqxDockingLayout’).jqxDockingLayout(‘saveLayout’);

    $.ajax({
    method : “POST”,
    cache : false,
    url : CONTEXT_ROOT + “/ResourceFile/saveLayout”,
    data : {“savedLayout” : JSON.stringify(savedLayout)},
    success : function (response, status, jqXHR) {},
    error : function(jqXHR, status, errorThrown) {
    alert(“Error: Status – ” + status + “, Message – ” + errorThrown);
    },
    complete : function() {}
    });
    return false;
    });

    function createlayout(){

    defaultLayout = [{
    type: ‘layoutGroup’,
    orientation: ‘vertical’,
    items: [{
    type: ‘layoutGroup’,
    orientation: ‘horizontal’,
    height: ‘50%’,
    items: [{
    type: ‘documentGroup’,
    width: ‘50%’,
    items: [{
    type: ‘documentPanel’,
    title: ‘Graph1’,
    contentContainer: ‘G1
    }]
    }, {
    type: ‘documentGroup’,
    width: ‘50%’,
    items: [{
    type: ‘documentPanel’,
    title: ‘Graph2’,
    contentContainer: ‘G2’,
    }]
    }]
    },{
    type: ‘layoutGroup’,
    orientation: ‘horizontal’,
    height: ‘50%’,
    items: [{
    type: ‘documentGroup’,
    width: ‘50%’,
    items: [{
    type: ‘documentPanel’,
    title: ‘Graph3’,
    contentContainer: ‘G3’
    }]
    }, {
    type: ‘documentGroup’,
    width: ‘50%’,
    items: [{
    type: ‘documentPanel’,
    title: ‘Graph4’,
    contentContainer: ‘G4’
    }]
    }]
    }]
    }];
    }

    }
    </script>
    </head>
    <body>
    <div id=”jqxDockingLayout”>
    <div data-container=”G1″>
    <div id=”graph1″ style=”height: 100%; width: 100%;”></div>
    </div>
    <div data-container=”G2″>
    <div id=”graph2″ style=”height: 100%; width: 100%;”></div>
    </div>
    <div data-container=”G3″>
    <div id=”graph3″ style=”height: 100%; width: 100%;”></div>
    </div>
    <div data-container=”G4″>
    <div id=”graph4″ style=”height: 100%; width: 100%;”></div>
    </div>
    </div>
    <div>
    <button id=”saveLayoutButton” style=”float: left; margin-right: 10px;”>Save layout</button>
    </div>
    </body>
    </html>

    July 3, 2017 at 5:09 am Retrieving layout after it is saved using JSON.stringify(savedLayout) #94644

    Dimitar
    Participant

    Hi Ojas Jakhi,

    Saving the layout to and loading it from a database has been discussed in the following topics where possible solutions have been presented:

    Please refer to the comments in these topics and take a look at the examples provided there.

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.