jQuery UI Widgets › Forums › Grid › Nested Grids with different child grid for each parent row
Tagged: different columns, grid, initrowdetails, jquery grid, jqxGrid ;, nested grids, showrowdetails
This topic contains 5 replies, has 5 voices, and was last updated by Hristo 5 years, 7 months ago.
-
Author
-
Sunil
I had a look at the nested grids sample at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/nestedgrids.htm.
My question is: Can I have a different schema for the nested grid for each parent row?
All parent rows will have the same schema i.e. columns, but the child grid columns will differ from one parent row to another.
Thanks
SunilHello Sunil,
This can be achieved. In initrowdetails you can check the parent row’s index and initialize the nested grid according to your specifications. Here is an example (based on the aforementioned demo) that might be of help:
<!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) { 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) { if (index === 0) { grid.jqxGrid({ source: nestedGridAdapter, width: 780, height: 200, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 200 }, { text: 'Ship Address', datafield: 'ShipAddress' } ] }); } else { grid.jqxGrid({ source: nestedGridAdapter, width: 780, height: 200, columns: [ { text: 'Ship City', datafield: 'ShipCity', width: 150 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 150 }, { text: 'Shipped Date', datafield: 'ShippedDate' } ] }); } } } 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: 600, 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', 0); $("#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 } ] }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Team,
We have nested grid with different data source for each parent grid row. We are trying to expand all the rows once parent and all the child tables are rendered. We have tried using ready and rendered (from the sample code) events in the parent row to expand rows but blank row detail displayed. On analysis found that the ready/rendered event for parent grid is triggered before the completion of initrowdetails callback.
How to expand all rows? What should be the approach?
Hello sara,
initrowdetails is called the first time each parent row is expanded, not automatically. In it, the nested content of rows is initialized. You can show all nested tables by calling the method showrowdetails for each row (possibly in the grid’s ready callback function).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Team,
I need your help. I have a nested grid on a grid, then a nested grid on a nested grid. I am using different dataAdapters on these grids. First grid is loading fine, when row is clicked nested grid (initrowdetails) will show and it loads fine, but when I click the nested grid for the other nested grid to show, it just keeps on loading and looping on my initrowdetails2. Please help. Here is my code.
Note that dataTable_UsageByAgent() & dataTable_UsageByTeam() are located on a different cshtml file and returns a dataadapter.
Hope to hear from you as soon as possible.
var urlGridResults = ‘@Url.Content(“~/”)’ + ‘QBotReporting/GridResults’;
var dateRange = $(‘#jqxDtiDateRange’).val().split(” – “);
var report_name = $(“#jqxDdlReportName”).val();function dataTable_UsageBySite() {
var source = {
datatype: “json”,
datafields: [
{ name: ‘Site’, type: ‘string’ },
{ name: ‘ConversationCount’, type: ‘string’ }
],
id: null,
url: urlGridResults,
data: {
startDate: dateRange[0],
endDate: dateRange[1],
reportName: report_name
},
root: ‘Rows’
}var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
if (dataAdapter.records.length == 0) {
$(“#errorMessage”).text(“No data found!”);
$(“#gridUsageBySite”).hide();
$(“#GridToolbars”).hide();
}
else {
$(“#errorMessage”).text(“”);
$(“#gridUsageBySite”).show();
$(“#GridToolbars”).show();
}
},loadError: function (xhr, status, error) {
$(“#gridUsageBySite”).hide();
$(“#errorMessage”).text(error);
}
});
return dataAdapter;}
var initrowdetails2 = function (index, parentElement, gridElement, record) {
//var gridAgent = $($(parentElement).children()[0]);
var gridAgent = $($.find(‘#subgrid’ + index))
debugger;
if (gridAgent != null) {
gridAgent.jqxGrid({
source: dataTable_UsageByAgent(), width: 850, height: 200, enabletooltips: true, selectionmode: ‘singlecell’,
columns: [
{ text: ‘Agent Name’, dataField: ‘AgentName’ },
{ text: ‘Department’, dataField: ‘Department’, hidden: true },
//{ text: ‘Site’, dataField: ‘Site’ },
{ text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
]
});
gridAgent.on(‘bindingcomplete’, function (event) {
$(“#errorMessage”).text(“”);
var filtergroup3 = new $.jqx.filter();
var filter3 = filtergroup3.createfilter(‘stringfilter’, record.Department.toString(), ‘EQUAL’);
filtergroup3.addfilter(1, filter3);
try { gridAgent.jqxGrid(‘addfilter’, ‘Department’, filtergroup3); } catch (e) {
alert(e);
}// add the filters.
gridAgent.jqxGrid(‘applyfilters’);// apply the filters.
return;
});}
}var initrowdetails = function (index, parentElement, gridElement, record) {
var gridTeam = $($(parentElement).children()[0]);
if (gridTeam != null) {
gridTeam.jqxGrid({
source: dataTable_UsageByTeam(), width: 850, height: 200, enabletooltips: true, selectionmode: ‘singlecell’,
initrowdetails: initrowdetails2,
rowdetails: true,
rowdetailstemplate: { rowdetails: “<div id=’subgrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
columns: [
{ text: ‘Department’, dataField: ‘Department’ },
{ text: ‘Site’, dataField: ‘Site’, hidden: true },
{ text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
]
});
gridTeam.on(‘bindingcomplete’, function (event) {
$(“#errorMessage”).text(“”);
var filtergroup2 = new $.jqx.filter();
var filter2 = filtergroup2.createfilter(‘stringfilter’, record.Site.toString(), ‘EQUAL’);
filtergroup2.addfilter(1, filter2);
try { gridTeam.jqxGrid(‘addfilter’, ‘Site’, filtergroup2); } catch (e) {
alert(e);
}// add the filters.
gridTeam.jqxGrid(‘applyfilters’);// apply the filters.
});}
}$(“#gridUsageBySite”).jqxGrid({
source: dataTable_UsageBySite(),
width: ‘99%’,
enabletooltips: true,
autoheight: true,
sortable: true,
filterable: true,
pageable: true,
showfilterrow: false,
filtermode: ‘default’,
initrowdetails: initrowdetails,
rowdetails: true,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
columns: [
{ text: ‘Site’, dataField: ‘Site’ },
{ text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
]
});Hello kayceegan,
Maybe you see this but I would like to suggest you look at this blog post.
Could you clarify it?
Is there any error message in the console?Also, please, take a look at this article, it could be helpful, too.
I would like to propose your attention on “data” object and the “formatData” callback.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.