jQuery UI Widgets › Forums › Grid › 3 jqxgrid in jqxtab with remote data – don't stop loading
Tagged: javascript grid, jq grid, jquery grid, jqwidgets grid, jqxgrid, jqxtab, Remote data
This topic contains 3 replies, has 2 voices, and was last updated by Michael Gross 9 years, 2 months ago.
-
Author
-
`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>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”.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 StoevjQWidgets Team
http://www.jqwidgets.com/Hello,
thank you for this helpful hint – I inserted “initTabContent: initWidgets” like the demo and everything works fine,
best regards
Mike -
AuthorPosts
You must be logged in to reply to this topic.