jQuery UI Widgets Forums Grid 3 jqxgrid in jqxtab with remote data – don't stop loading

This topic contains 3 replies, has 2 voices, and was last updated by  Michael Gross 8 years, 8 months ago.

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

  • Michael Gross
    Participant

    `Hello,
    I have 3 Grids in a Tab which are loaded by a dataadapter from our database: Grid in Tab 1 loads normal, the Grids on Tab 2 and Tab 3 are not stopping to load (http://jsfiddle.net/drmikegross/ug146h38/2/). I reduced the code and put it into a fiddle, but can’t figure out whats wrong – pls help.

    Thanks
    Mike

    <!doctype html>
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <link rel=”stylesheet” href=”./stylesheets/jqx.base.css” type=”text/css”>
    <script src=”../../js/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../js/jqwidgets-ver3.9.0/jqwidgets/jqx-all.js”></script>
    <script type=”text/javascript”>

    var demoColumns = [
    { text: ‘Date’, editable: false, dataField: ‘etd’, width: 80, cellsformat: ‘dd.MMM.yyyy’ },
    { text: ‘Record’, editable: false, dataField: ‘stt’, width: 100 },
    { text: ‘Name’, editable: false, dataField: ‘vd’, width: 110 },
    { text: ‘Box’, editable: false, dataField: ‘cont-nr’, width: 110 },
    { text: ‘Open Task’, editable: false, dataField: ‘nextstat’ }
    ];
    var demoFields = [
    { name: ‘reconid’, type: ‘string’ },
    { name: ‘etd’, type: ‘date’ },
    { name: ‘vd’, type: ‘string’ },
    { name: ‘cont-nr’, type: ‘string’ },
    { name: ‘stt’, type: ‘string’ },
    { name: ‘nextstat’, type: ‘string’ }
    ];
    var demoUrl = “/portal/recon.demo.slag/getreconlist.p”;
    var demoSource = {
    datatype: “json”,
    datafields: demoFields,
    url: demoUrl,
    id: ‘reconid’,
    sortcolumn: ‘etd’,
    sortdirection: ‘desc’,
    data: {
    typ: ‘JSON’,
    id: ’30’,
    stat: ’15’,
    maxRows: 100
    }
    };

    function initdemoTransfer () {
    demoSource.data.stat = ’45’;
    var demoTransferDataAdapter = new $.jqx.dataAdapter(demoSource, {});
    $(“#demoTransferGrid”).jqxGrid( {
    width: 550,
    height: 255,
    source: demoTransferDataAdapter,
    columns: demoColumns
    });
    };
    function initdemoDestination () {
    demoSource.data.stat = ’65’;
    var demoDestinationDataAdapter = new $.jqx.dataAdapter(demoSource, {});
    $(“#demoDestinationGrid”).jqxGrid( {
    width: 550,
    height: 255,
    source: demoDestinationDataAdapter,
    columns: demoColumns
    });
    };
    function initdemoOrigin () {
    demoSource.data.stat = ’35’;
    var demoOriginDataAdapter = new $.jqx.dataAdapter(demoSource, {});
    $(“#demoOriginGrid”).jqxGrid( {
    width: 550,
    height: 255,
    source: demoOriginDataAdapter,
    columns: demoColumns
    });
    };
    $(document).ready(function () {
    $(‘#demoTabs’).jqxTabs({ width: ‘550’, height: 310, position: ‘top’ });
    initdemoOrigin();
    initdemoDestination();
    initdemoTransfer();
    });
    </script>
    </head>
    <body>
    <div id=”windowContainer”>
    <div id=”demoTabs”>
    <ul style=”margin-left: 30px”>

  • Page 1
  • Page 2
  • Page 3
  • <div style=”overflow: hidden;”>
    <div id=”demoDestinationGrid” class=”no-border” style=”margin: 0;”></div>
    </div>
    <div style=”overflow: hidden;”>
    <div id=”demoTransferGrid” class=”no-border” style=”margin: 0;”></div>
    </div>
    <div style=”overflow: hidden;”>
    <div id=”demoOriginGrid” class=”no-border” style=”margin: 0;”></div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>


Michael Gross
Participant

Hello,
a few more findings:
Grid on page 1 is loading always correct – if I change the order of the pages all three Grids are loaded correctly if they are on page 1. The grids on page 2 and 3 fire the “beforeLoad” event, but then raise the error “Uncaught TypeError: Cannot read property ‘length’ of undefined”.


Peter Stoev
Keymaster

Hi,

I would suggest you to look at our demos about widgets in jqxTabs and how they’re initialized. This is the issue in your code – Grids are not created in the initTabContent function when necessary.

Best Regards,
Peter Stoev

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


Michael Gross
Participant

Hello,
thank you for this helpful hint – I inserted “initTabContent: initWidgets” like the demo and everything works fine,
best regards
Mike

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

You must be logged in to reply to this topic.