jQWidgets Forums
jQuery UI Widgets › Forums › Grid › 2 grids on one page
Tagged: 2 grids 1 page, same page
This topic contains 2 replies, has 2 voices, and was last updated by swisspen 9 years, 8 months ago.
-
Author2 grids on one page Posts
-
Hi
I have read around on this forum and on the web in general, but cannot figure out why my first grid displays, but not the second. When I comment out all the code for the first grid, the second one appears, but not otherwise.
My script is as follows:$(document).ready(function () { var data1 = { datatype: "json", datafields: [ {name: 'act_id'}, {name: 'act_name', type: 'string'} ], url: 'iwcn-json-responses.php?fct=getJSONAllLangActs', sortcolumn: 'act_id', sortdirection: 'asc', async: false, };//end data source 1 //create the dataAdapter for Grid 1 var adapter1 = new $.jqx.dataAdapter(data1); var columns1 = [ { text: 'Id', datafield: 'act_id', width: 20 }, { text: 'Language', datafield: 'act_name', width: 200 } ]; //INITIALIZE GRID 1 $("#lang-grid").jqxGrid( { width: 250, source: adapter1, theme: 'classic', selectionmode: 'checkbox', columns: columns1 });//end grid 1 declaration //build array of language-related activities selectedRows.length = 0; $('#lang-grid').on('rowselect', function (event) { var thisRow = event.args.rowindex; var idCell = $('#lang-grid').jqxGrid('getcell', thisRow, 'act_id'); //if they click the All Rows box, null is returned if (idCell === null) { //select all rows' values for (var i = 0; i <= thisRow.length; i++) { idCell = $('#lang-grid').jqxGrid('getcell', i, 'act_id'); selectedRows.push(idCell.value); } } else { selectedRows.push(idCell.value); } }); var data2 = { datatype: "json", datafields: [ {name: 'act_id'}, {name: 'act_name', type: 'string'} ], url: 'iwcn-json-responses.php?fct=getJSONAllGameActs', sortcolumn: 'act_id', sortdirection: 'asc', async: false, };//end data source 2 //create the dataAdapter for Grid 2 var adapter2 = new $.jqx.dataAdapter(data2); var columns2 = [ { text: 'Id', datafield: 'act_id', width: 20 }, { text: 'Game', datafield: 'act_name', width: 150 } ]; //INITIALIZE GRID 2 $("#game-grid").jqxGrid( { width: 250, source: adapter2, theme: 'classic', selectionmode: 'checkbox', columns: columns2 });//end grid 2 declaration //build array of game-related activities selectedRows.length = 0; //var arraySize = 0; $("#game-grid").on('rowselect', function (event) { var thisRow = event.args.rowindex; var idCell = $("#game-grid").jqxGrid('getcell', thisRow, 'act_id'); //if they click the All Rows box, null is returned if (idCell === null) { //select all rows' values for (var i = 0; i <= thisRow.length; i++) { idCell = $("#game-grid").jqxGrid('getcell', i, 'act_id'); //alert("id cell is null, pushing act id " + idCell.value); selectedRows.push(idCell.value); } } else { selectedRows.push(idCell.value); } }); });
For information, the first grid is populated from a db table that has id numbering in the sequence 1,2,3 etc, while the second grid is populated from a table numbered 101,102,103 etc.
My html is as follows:
<table style="width: 50%; "> <tr> <td style="border: 1px solid #000; width: 300px;"><div id="lang-grid"></div></td> </tr> </table> <table style="width: 50%; "> <tr> <td style="border: 1px solid #000; width: 300px;"><div id="game-grid"></div></td> </tr> </table>
The above is one of many, many attempts to make them both display … no deal. Only the first one is displayed. I’ve checked what the json returns and that aspect is fine. Only the display in html isn’t working!
Any solutions out there?
Thanks
SPHi SP,
Check your JavaScript code for syntax errors and your HTML, too. There is no problem to display as many Grids as you wish and we have demos about that online.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comOK – I did what you said, then I tried moving the function that handles a row-select for the first grid:
$("#lang-grid").on('rowselect', function (event)
to a position AFTER all the code that sets up the 2nd grid – and that worked! Now I can even get both grids to show up side by side, as long as their row-select functions come AFTER the grid setup.I can’t say I understand why this should be, but that’s okay!
Thanks,
SP -
AuthorPosts
You must be logged in to reply to this topic.