jQuery UI Widgets › Forums › Grid › Problem with Grid and Layout
Tagged: angular grid, grid, initContent, jquery grid, jqxgrid, jqxGrid in jqxLayout, jqxLayout, layout
This topic contains 5 replies, has 3 voices, and was last updated by Dimitar 8 years, 4 months ago.
-
Author
-
I’m attempting to place a grid in a panel of a layout control. The data displays, but the grid is not responding to row selection.
* I placed an alert() in the rowselect function and it doesn’t get called when the grid is inside the layout.
* Developer Tools displays no error messagesWhat am I doing wrong?
<script type="text/javascript"> $(document).ready(function () { // Set up grid var data = '[{ "AccountName": "Checking Account #1", "AccountBalance": "$4,096.42"}, { "AccountName": "Savings Account #2", "AccountBalance": "$8,192.00"}]'; // prepare the data var source = { datatype: "json", datafields: [ { name: 'AccountName', type: 'string' }, { name: 'AccountBalance', type: 'string' } ], localdata: data, updaterow: function (rowid, rowdata, commit) { commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: '100%', height: '100%', source: dataAdapter, columnsresize: true, columns: [ { text: 'Account', datafield: 'AccountName', width: 250 }, { text: 'Balance', datafield: 'AccountBalance', width: 150 } ] }); $("#AccountName").jqxInput({height: 23}); $("#AccountBalance").jqxInput({ height: 23}); $('#jqxgrid').on('rowselect', function (event) { alert('hi') // event arguments. var args = event.args; // selected row. var row = event.args.row; // update inputs. $("#AccountName").val(row.AccountName); $("#AccountBalance").val(row.AccountBalance); }); $("#Save").jqxButton({ width: 70, height: 23 }); $("#Save").click(function () { var row = $('#jqxgrid').jqxGrid('getselectedrowindex'); var rowid = $("#jqxgrid").jqxGrid('getrowid', row); var data = { AccountName: $("#AccountName").val(), AccountBalance: $("#AccountBalance").val() }; $("#jqxgrid").jqxGrid('updaterow', rowid, data); }); // the 'layout' JSON array defines the internal structure of the layout var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [ { type: 'tabbedGroup', width: '25%', items: [{ type: 'layoutPanel', title: 'Account List', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'layoutGroup', orientation: 'vertical', width: '75%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Register', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] } ] }]; $('#jqxLayout').jqxLayout({ width: '100%', height: '100%', layout: layout }); }); var loadPage = function (url) { $.get(url, function (data) { $('#Test').html('<div style="overflow: auto; width: 100%; height: 100%;">' + data + '</div>'); }); } loadPage('main.js'); </script> </head> <body> <div id="jqxLayout"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> <div id="Test"> <img src='jqwidgets/images/ajax-loader.gif' /> </div> </div> <div id="ContentPanel" data-container="Document2Panel"> <form id="Form"> <table style="margin-top: 20px; width: 100%;"> <tr><td style="text-align:right;">Company Name:</td><td style="text-align:left;"><input type="text" id="AccountName" /></td></tr> <tr><td style="text-align:right;">Contact Name:</td><td style="text-align:left;"><input type="text" id="AccountBalance" /></td></tr> <tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr> </table> </form> </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors</div> <div data-container="OutputPanel"> Output</div> <!--right tabbedGroup--> <div id='jqxgrid' data-container="SolutionExplorerPanel"></div> <div data-container="PropertiesPanel"> List of properties</div> </div> </body> </html>
I should add that when I move the following out of the jqxLayout div, the grid works, but of course, the layout is gone:
<div id='jqxgrid' data-container="SolutionExplorerPanel">This is no working</div>
Hello TomArcher,
Widgets inside jqxLayout/jqxDockingLayout have to be initialized inside the panel initContent callback function. Here is an updated version of your code that works as expected:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <style type="text/css"> html, body { height: 100%; } </style> <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/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.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxribbon.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/jqxinput.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // the 'layout' JSON array defines the internal structure of the layout var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [ { type: 'tabbedGroup', width: '25%', items: [{ type: 'layoutPanel', title: 'Account List', contentContainer: 'SolutionExplorerPanel', initContent: function () { // Set up grid var data = '[{ "AccountName": "Checking Account #1", "AccountBalance": "$4,096.42"}, { "AccountName": "Savings Account #2", "AccountBalance": "$8,192.00"}]'; // prepare the data var source = { datatype: "json", datafields: [ { name: 'AccountName', type: 'string' }, { name: 'AccountBalance', type: 'string' } ], localdata: data, updaterow: function (rowid, rowdata, commit) { commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: '100%', height: '100%', source: dataAdapter, columnsresize: true, columns: [ { text: 'Account', datafield: 'AccountName', width: 250 }, { text: 'Balance', datafield: 'AccountBalance', width: 150 } ] }); $('#jqxgrid').on('rowselect', function (event) { alert('hi') // event arguments. var args = event.args; // selected row. var row = event.args.row; // update inputs. $("#AccountName").val(row.AccountName); $("#AccountBalance").val(row.AccountBalance); }); } }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'layoutGroup', orientation: 'vertical', width: '75%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Register', contentContainer: 'Document1Panel', initContent: function () { loadPage('main.js'); } }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel', initContent: function () { $("#AccountName").jqxInput({ height: 23 }); $("#AccountBalance").jqxInput({ height: 23 }); $("#Save").jqxButton({ width: 70, height: 23 }); $("#Save").click(function () { var row = $('#jqxgrid').jqxGrid('getselectedrowindex'); var rowid = $("#jqxgrid").jqxGrid('getrowid', row); var data = { AccountName: $("#AccountName").val(), AccountBalance: $("#AccountBalance").val() }; $("#jqxgrid").jqxGrid('updaterow', rowid, data); }); } }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] } ] }]; $('#jqxLayout').jqxLayout({ width: '100%', height: '100%', layout: layout }); }); var loadPage = function (url) { $.get(url, function (data) { $('#Test').html('<div style="overflow: auto; width: 100%; height: 100%;">' + data + '</div>'); }); } </script> </head> <body> <div id="jqxLayout"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> <div id="Test"> <img src='jqwidgets/images/ajax-loader.gif' /> </div> </div> <div id="ContentPanel" data-container="Document2Panel"> <form id="Form"> <table style="margin-top: 20px; width: 100%;"> <tr><td style="text-align:right;">Company Name:</td><td style="text-align:left;"><input type="text" id="AccountName" /></td></tr> <tr><td style="text-align:right;">Contact Name:</td><td style="text-align:left;"><input type="text" id="AccountBalance" /></td></tr> <tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr> </table> </form> </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> <div id='jqxgrid'></div> </div> <div data-container="PropertiesPanel"> List of properties </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Works perfect. Thanks!
I have a similar problem but the jqxGrid is placed (with other jqxGrid controls) inside a div which in inside another container (but not from jqxwidgets).
Once I scroll down the top level container the jqxGrid selections get corrupted – they take into account the offset of the vertical scroll position of the container, which is incorrect, and the hover proves it. The selected row is above the actual mouse position, depending on the container’s vertical scroll bar position.Please advise.
Hello bigman73,
We are not sure why this issue occurs but it might have something to do with the third-party container you are using. You can try positioning your grids in our widget jqxPanel, as shown in the following example: https://www.jseditor.io/?key=jqxgrid-inside-jqxpanel.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.