jQWidgets Forums
jQuery UI Widgets › Forums › Getting Started › Nested Grid on a Nested Grid
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 6 years, 1 month ago.
-
Author
-
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’ }
]
}); -
AuthorPosts
You must be logged in to reply to this topic.