jQWidgets Forums
jQuery UI Widgets › Forums › Grid › nested grid with JSON
Tagged: javascript nested grids, nested grid
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 8 years, 11 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Authornested grid with JSON Posts
-
Hi all,
I use jqx nested grid with JSON file and it works fine. code
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example shows how to display nested Grid plugins.</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = 'fresh'; var data = [ { "year": "2000", "ED": "51", "LF": "1.21839", "PMAX": "8", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "2.500000", "CF": "2.500000" }, { "tech": "Wind", "InstalledPower": "39.000000", "CF": "39.000000" }, { "tech": "Hydro", "InstalledPower": "35.000000", "CF": "39.000000" } ] } }, { "year": "2010", "ED": "92", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } }, { "year": "2020", "ED": "62", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } } ]; var source = { datafields: [ { name: 'year', type: 'int' }, { name: 'ED', type: 'int' }, { name: 'LF', type: 'decimal' }, { name: 'PMAX', type: 'decimal' } ], datatype: 'json', localdata: data }; var adapter = new $.jqx.dataAdapter(source); // create nested grid. var initrowdetails = function (index, parentElement, gridElement, record) { var id = record.uid.toString(); var grid = $($(parentElement).children()[0]); var nestedSource = { datafields: [ { name: 'tech', map: 'tech', type: 'string' }, { name: 'InstalledPower', InstalledPower: 'Min', type: 'int' }, { name: 'CF', map: 'CF', type: 'int' } ], datatype: 'json', root: 'technology', localdata: data[index].technologies }; var nestedAdapter = new $.jqx.dataAdapter(nestedSource); if (grid != null) { grid.jqxGrid({ source: nestedAdapter, theme: theme, width: 600, height: 200, columns: [ { text: "Technology", datafield: "tech" }, { text: "Installed Power", datafield: "InstalledPower" }, { text: "Capacity Factor", datafield: "CF" } ] }); } } // creage jqxgrid $("#jqxgrid").jqxGrid( { width: 670, height: 365, source: source, theme: theme, rowdetails: true, rowsheight: 35, initrowdetails: initrowdetails, rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true }, ready: function () { $("#jqxgrid").jqxGrid('showrowdetails', 1); }, columns: [ { text: 'Year', datafield: 'year', width: 150 }, { text: 'ED', datafield: 'ED', width: 150 }, { text: 'LF', datafield: 'LF', width: 150 }, { text: 'Peak Load', datafield: 'PMAX', } ] }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>but when I try to load same data from url my nested grid is empty. What am I doing wrong?
Any suggestions. code with remote json below<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example shows how to display nested Grid plugins.</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = 'fresh'; var source = { datafields: [ { name: 'year', type: 'int' }, { name: 'ED', type: 'int' }, { name: 'LF', type: 'decimal' }, { name: 'PMAX', type: 'decimal' }, { name: 'tech', map: 'technologies>technology>tech'}, { name: 'InstalledPower', map: 'technologies>technology>InstalledPower'}, { name: 'CF', map: 'technologies>technology>CF'} ], datatype: 'json', url: 'data.json', async: false, }; var adapter = new $.jqx.dataAdapter(source, { autoBind: true }); // create nested grid. var data = source.records; console.log(data); var initrowdetails = function (index, parentElement, gridElement, record) { var id = record.uid.toString(); var grid = $($(parentElement).children()[0]); var nestedSource = { datafields: [ { name: 'tech', map: 'tech', type: 'string' }, { name: 'InstalledPower', InstalledPower: 'Min', type: 'int' }, { name: 'CF', map: 'CF', type: 'int' } ], datatype: 'json', root: 'technology', localdata: data[index].technologies }; var nestedAdapter = new $.jqx.dataAdapter(nestedSource); if (grid != null) { grid.jqxGrid({ source: nestedAdapter, theme: theme, width: 600, height: 200, columns: [ { text: "Technology", datafield: "tech" }, { text: "Installed Power", datafield: "InstalledPower" }, { text: "Capacity Factor", datafield: "CF" } ] }); } } // creage jqxgrid $("#jqxgrid").jqxGrid( { width: 670, height: 365, source: source, theme: theme, rowdetails: true, rowsheight: 35, initrowdetails: initrowdetails, rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true }, ready: function () { $("#jqxgrid").jqxGrid('showrowdetails', 1); }, columns: [ { text: 'Year', datafield: 'year', width: 150 }, { text: 'ED', datafield: 'ED', width: 150 }, { text: 'LF', datafield: 'LF', width: 150 }, { text: 'Peak Load', datafield: 'PMAX', } ] }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>THANK YOU!
Hi atomic,
When you load data through AJAX, you should consider the fact that A from AJAX means asynchronous i.e this part of your code: var data = source.records; returns empty set of records. I would suggest you to move this code within the dataAdapter’s loadComplete callback function or set async: false in the source object.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.