jQuery UI Widgets › Forums › Grid › hide the nested grid with no data
Tagged: arrow, collapse, display, expand, grid, hide, jqxgrid, nested, nested grids, no data, remove, row details
This topic contains 4 replies, has 3 voices, and was last updated by mandy33 9 years, 9 months ago.
-
Author
-
In my case, I don’t want to display the nested grid if there is no data, which api I can use , please help me
Hello lipidong,
Here are two code samples that show two possible solutions:
1) If you know that a certain row does not need a nested grid (e.g. the row with index 2):
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <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.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" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/employees.xml"; var source = { datafields: [ { name: 'FirstName' }, { name: 'LastName' }, { name: 'Title' }, { name: 'Address' }, { name: 'City' } ], root: "Employees", record: "Employee", id: 'EmployeeID', datatype: "xml", async: false, url: url }; var employeesAdapter = new $.jqx.dataAdapter(source); var orderdetailsurl = "../sampledata/orderdetails.xml"; var ordersSource = { datafields: [ { name: 'EmployeeID', type: 'string' }, { name: 'ShipName', type: 'string' }, { name: 'ShipAddress', type: 'string' }, { name: 'ShipCity', type: 'string' }, { name: 'ShipCountry', type: 'string' }, { name: 'ShippedDate', type: 'date' } ], root: "Orders", record: "Order", datatype: "xml", url: orderdetailsurl, async: false }; var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true }); orders = ordersDataAdapter.records; var nestedGrids = new Array(); // create nested grid. var initrowdetails = function (index, parentElement, gridElement, record) { if (index !== 2) { var id = record.uid.toString(); var grid = $($(parentElement).children()[0]); nestedGrids[index] = grid; var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = id; var filtercondition = 'equal'; var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); // fill the orders depending on the id. var ordersbyid = []; for (var m = 0; m < orders.length; m++) { var result = filter.evaluate(orders[m]["EmployeeID"]); if (result) ordersbyid.push(orders[m]); } var orderssource = { datafields: [ { name: 'EmployeeID', type: 'string' }, { name: 'ShipName', type: 'string' }, { name: 'ShipAddress', type: 'string' }, { name: 'ShipCity', type: 'string' }, { name: 'ShipCountry', type: 'string' }, { name: 'ShippedDate', type: 'date' } ], id: 'OrderID', localdata: ordersbyid } var nestedGridAdapter = new $.jqx.dataAdapter(orderssource); if (grid != null) { grid.jqxGrid({ source: nestedGridAdapter, width: 780, height: 200, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 200 }, { text: 'Ship Address', datafield: 'ShipAddress', width: 200 }, { text: 'Ship City', datafield: 'ShipCity', width: 150 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 150 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 } ] }); } } } var photorenderer = function (row, column, value) { var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName; var imgurl = '../../images/' + name.toLowerCase() + '.png'; var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>'; return img; } var renderer = function (row, column, value) { return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>'; } // creage jqxgrid $("#jqxgrid").jqxGrid( { width: 850, height: 365, source: source, 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: 'Photo', width: 50, cellsrenderer: photorenderer }, { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer }, { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer }, { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer }, { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer }, { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer } ] }); $("#jqxgrid").on('rowclick', function (event) { // original event. var ev = event.args.originalEvent; var cell = $('#jqxgrid').jqxGrid('getcellatposition', ev.pageX, ev.pageY); if (cell.column && cell.value) { alert("Row clicked."); } }); $('#jqxgrid').on('rowexpand', function (event) { // event arguments. var args = event.args; // row details. var details = args.details; // row's bound index. var rowBoundIndex = args.rowindex; if (rowBoundIndex === 2) { $('#jqxgrid').jqxGrid('hiderowdetails', 2); } }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>
2) If you do not know which row(s) does not have any nested grid data:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <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.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" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/employees.xml"; var source = { datafields: [ { name: 'FirstName' }, { name: 'LastName' }, { name: 'Title' }, { name: 'Address' }, { name: 'City' } ], root: "Employees", record: "Employee", id: 'EmployeeID', datatype: "xml", async: false, url: url }; var employeesAdapter = new $.jqx.dataAdapter(source); var orderdetailsurl = "../sampledata/orderdetails.xml"; var ordersSource = { datafields: [ { name: 'EmployeeID', type: 'string' }, { name: 'ShipName', type: 'string' }, { name: 'ShipAddress', type: 'string' }, { name: 'ShipCity', type: 'string' }, { name: 'ShipCountry', type: 'string' }, { name: 'ShippedDate', type: 'date' } ], root: "Orders", record: "Order", datatype: "xml", url: orderdetailsurl, async: false }; var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true }); orders = ordersDataAdapter.records; var nestedGrids = new Array(); var emptyRow = null; // create nested grid. var initrowdetails = function (index, parentElement, gridElement, record) { var id = record.uid.toString(); var grid = $($(parentElement).children()[0]); nestedGrids[index] = grid; var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = id; var filtercondition = 'equal'; var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); // fill the orders depending on the id. var ordersbyid = []; for (var m = 0; m < orders.length; m++) { var result = filter.evaluate(orders[m]["EmployeeID"]); if (result) ordersbyid.push(orders[m]); } var orderssource = { datafields: [ { name: 'EmployeeID', type: 'string' }, { name: 'ShipName', type: 'string' }, { name: 'ShipAddress', type: 'string' }, { name: 'ShipCity', type: 'string' }, { name: 'ShipCountry', type: 'string' }, { name: 'ShippedDate', type: 'date' } ], id: 'OrderID', localdata: ordersbyid } var nestedGridAdapter = new $.jqx.dataAdapter(orderssource, { autoBind: true, loadComplete: function () { var records = dataAdapter.records; if (records.length === 0) { emptyRow = index; } } }); if (grid != null && emptyRow !== index) { grid.jqxGrid({ source: nestedGridAdapter, width: 780, height: 200, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 200 }, { text: 'Ship Address', datafield: 'ShipAddress', width: 200 }, { text: 'Ship City', datafield: 'ShipCity', width: 150 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 150 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 } ] }); } } var photorenderer = function (row, column, value) { var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName; var imgurl = '../../images/' + name.toLowerCase() + '.png'; var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>'; return img; } var renderer = function (row, column, value) { return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>'; } // creage jqxgrid $("#jqxgrid").jqxGrid( { width: 850, height: 365, source: source, 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: 'Photo', width: 50, cellsrenderer: photorenderer }, { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer }, { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer }, { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer }, { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer }, { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer } ] }); $("#jqxgrid").on('rowclick', function (event) { // original event. var ev = event.args.originalEvent; var cell = $('#jqxgrid').jqxGrid('getcellatposition', ev.pageX, ev.pageY); if (cell.column && cell.value) { alert("Row clicked."); } }); $('#jqxgrid').on('rowexpand', function (event) { // event arguments. var args = event.args; // row details. var details = args.details; // row's bound index. var rowBoundIndex = args.rowindex; if (rowBoundIndex === emptyRow) { $('#jqxgrid').jqxGrid('hiderowdetails', emptyRow); } }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
I have some rows in a nested grid with no data on the expanded rows. I’d like to hide the arrows on the parent level, so users will not be able to drill down to its empty expand rows. Is there any ways to hide arrows for those particular rows? I tried to set showrowdetailscolumn: false, but it would hide all arrows for the Grid. Please help, thank you!
Mandy
Hi Mandy,
Here is how to remove the arrows of the first and third rows of a grid:
$("#jqxgrid").jqxGrid( { width: 850, height: 250, source: dataAdapter, rowdetails: true, rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 }, ready: function () { var arrows = $('#jqxgrid .jqx-grid-cell-pinned'); arrows.eq(0).css('background-image', 'none'); arrows.eq(2).css('background-image', 'none'); }, initrowdetails: initrowdetails, columns: [ { text: 'First Name', datafield: 'firstname', width: 200 }, { text: 'Last Name', datafield: 'lastname', width: 200 }, { text: 'Title', datafield: 'title', width: 180 }, { text: 'City', datafield: 'city', width: 100 }, { text: 'Country', datafield: 'country' } ] });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Yup, it works. Thank you for your help!
Mandy
-
AuthorPosts
You must be logged in to reply to this topic.