I have a jqGrid displaying data in groups; there are too many columns to view conveniently, so I want to put less important data in a subgrid. There will only ever be one row in any subgrid. The data for the subgrid row will be obtained at the same time as the data in the parent row; I would like to use the subGridRowExpanded callback to obtain the data from the parent row and put it in the subgrid row when the user expands the row to see the subgrid.
Separately from what is shown here, I have tried using subGridModel to specify the name of the subgrid, but in that case and for the code shown, subGridRowExpanded is not invoked and I don't know why.
$(document).ready(function() {
$(".aclSection").show();
setListGrid();
function setListGrid() {
console.log("entering setListGrid() in opportunitySalesFunnelList.js");
$("#listGrid").jqGrid(getGridSettings());
$("#listGrid").jqGrid('navGrid', '#funnelOpportunityListPager',
{ cloneToTop:true,refreshtitle: "Reload Grid",
refreshtext: "Refresh Grid",
refreshstate:"current",
refresh: false,edit:false, add:false, del:false, search:false
}
);
$(window).bind('resize', function() {
jQuery("#grid").setGridWidth($('.gridParent').width()-30, true);
}).trigger('resize');
}
function getGridSettings() {
return {
url: "/salespoint/secure/funnel/opportunity/list/getDataMap"
,datatype: "json"
,height: "auto"
,width: 950
,shrinkToFit: true
,loadtext: "Loading..."
,colNames: ["Sales Mgr"
,"Agency / Spersn"
,"Sales Code"
,"Pros Name"
,"Prob"
,"Opp ID"
,"Opp Name"
,"Stg/Sts"
,"3 YR MRC"
,"3 YR NRC"
,"Last Activity"
,"Notes"
]
,colModel:[
{name:"salesManager", index:"salesManager" }
,{name:"agencyOrSalesperson", index:"agencyOrSalesperson" }
,{name:"salesCode", index:"salesCode" }
,{name:"prospectName", index:"prospectName" ,align:'left'}
,{name:"probability", index:"probability" }
,{name:"opportunityId", index:"opportunityId" }
,{name:"opportunityName", index:"opportunityName" ,align:'left'}
,{name:"stageAndStatus", index:"stageAndStatus" }
,{name:"mrc3yr", index:"mrc3yr" ,align:'right' , summaryType:'sum', summaryRound: 2, summaryRoundType: 'fixed' }
,{name:"nrc3yr", index:"nrc3yr" ,align:'right' , summaryType:'sum', summaryRound: 2, summaryRoundType: 'fixed' }
,{name:"lastActivity", index:"lastActivity" ,align:'left' }
,{name:"noteCount", index:"noteCount" }
]
,gridview: true
,subGrid: true
,subGridRowExpanded: function(subgrid_id, rowId1) {
console.log("subGridRowExpanded, subGridDivId1/rowId1:" + subGridDivId1 + "/" + rowId1);
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
var listGrid = $("#" + subgrid_id);
listGrid.html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
listGrid.jqGrid({
colNames: ["Pros ID","Pros Age","Opp Age","Location Count by Service","# Locs","Activity Date","Activity Created By"]
,colModel: [ {name:"prospectId", index:"prospectId" }
,{name:"prospectAge", index:"prospectAge" }
,{name:"opportunityAge", index:"opportunityAge" }
,{name:"locationServiceCount",index:"locationServiceCount" ,align:'left' }
,{name:"numberOfLocations", index:"numberOfLocations" }
,{name:"activityDate", index:"activityDate" }
,{name:"activityCreatedBy", index:"activityCreatedBy" }
]
,rowNum: 1
,height: '100%'
})
var rowData = $(this).getRowData(rowId1);
}
,grouping:true
,groupingView:
{
groupField: ["salesManager"]
,groupColumnShow: [true]
,groupText: ["<b>{0}</b>"]
,groupOrder: ["asc"]
,groupSummary: [true] // will use the "summaryTpl" property of the respective column
,groupCollapse: false
,groupDataSorted: true
,formatDisplayField: [function(curValue, srcValue, colModelOption, grpIndex, grpObject) {
return srcValue.toFixed(2);
}]
}
,footerrow:true
,userDataOnFooter:true
,rowNum: 20
,rowList:[20,50,100,100000000]
,rowTotal:4000
,loadonce:true
,ignoreCase:true
,viewRecords:true
,onPaging:function(pgButton) {
var rowNum = $("#listGrid").getGridParam("rowNum");
$.cookie("userOptions_prospectListPagingSize", rowNum);
}
,gridComplete:function(id) {
$("#listGrid").setGridWidth($('.gridParent').width(), true);
$("#listGrid").trigger("resize", [{page:1}]);
}
,emptyrecords: '<span class="jqGridHighlight">No records found</span>'
,pager : '#funnelOpportunityListPager'
};
}
});
When I click on the plus icon (which does appear), nothing visible happens, and a breakpoint set at the first line of code in subGridRowExpanded is not hit. Why doesn't it get invoked, and do I have the rest of the setup right for displaying the data?
edit after Oleg's answer:
Version is the 4.7 trirand version before the free/commercial forks. I'm sorry I didn't put this in originally, I was sort of continuing a previous question, but I should have included it.
Yes, data is sorted on salesManager when it is returned from the server. As I said, the grouping is working; it is the subgrid that is not working.
As I also said, rowNum of 1 is accurate, there is only ever one subrow of the main row. The purpose here is to display more columns about the same index. subgrid is useful when there are children of the row, but in my case there is only ever one child. I'm happy to make the number larger, but that is the largest (and smallest) number of rows for which there are data in my case.
I have tried to correct subGridRowExpanded with your suggestions, this is what it looks like now:
,subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
parentRowData = $(this).jqGrid("getLocalRow", rowid),
// the next line can be used if parent grid doesn't contain local data
//parentRowData = $(this).jqGrid("getRowData", rowid),
$subgridDataDiv = $("#" + subgridDivId);
$subgridDataDiv.append($subgrid); // place subgrid table on the page
// create subgrid
$subgrid.jqGrid({
colNames: ["Pros ID","Pros Age","Opp Age","Location Count by Service","# Locs","Activity Date","Activity Created By"]
,colModel: [ {name:"prospectId", }
,{name:"prospectAge" }
,{name:"opportunityAge" }
,{name:"locationServiceCount", align:'left' }
,{name:"numberOfLocations" }
,{name:"activityDate" }
,{name:"activityCreatedBy" }
]
,rowNum: 1
,height: '100%'
});
}
There is a commented out line you say can be used "if parent grid doesn't contain local data", but my parent grid does contain the data for the subgrid, so I thought the line should remain commented. The JSON for the grid data looks like this:
{
"userdata": {
"nrc3yr": "2705545.00",
"mrc3yr": "2798103.26"
},
"records": "4",
"rows": [{
"prospectName": "Big Daddy Daycare",
"opportunityName": "Opp2018-06-22",
"nrc3yr": "295.00",
"salesCode": "CMR",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 309,
"prospectAge": "2",
"activityDate": "06-22-2018",
"opportunityAge": 2,
"numberOfLocations": 1,
"locationServiceCount": "Cable (1), IP Hosted (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "CMR",
"opportunityId": 696,
"salesManager": "CMR",
"stageAndStatus": "Draft\/Create",
"mrc3yr": "223.01",
"lastActivity": "Opportunity (696) created (Opp2018-06-22)"
},
{
"prospectName": "Wine Not",
"opportunityName": "Opp20180410-1051",
"nrc3yr": "0.00",
"salesCode": "ADV004",
"probability": "50%",
"noteCount": 17,
"subgrid": [{
"prospectId": 297,
"prospectAge": "89",
"activityDate": "06-07-2018",
"opportunityAge": 75,
"numberOfLocations": 1,
"locationServiceCount": "EoC Symmetric (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "ADV",
"opportunityId": 682,
"salesManager": "JWE",
"stageAndStatus": "Proposal\/In Progress",
"mrc3yr": "312.60",
"lastActivity": "Proposal (1,099) published (Prop20180607-1642)"
},
{
"prospectName": "Ever Lovin' Lovin",
"opportunityName": "Opp20180531-1943",
"nrc3yr": "0.00",
"salesCode": "RTB",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 307,
"prospectAge": "24",
"activityDate": "05-31-2018",
"opportunityAge": 24,
"numberOfLocations": 1,
"locationServiceCount": "EoC Asymmetric (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "RTB",
"opportunityId": 690,
"salesManager": "RTB",
"stageAndStatus": "Proposal\/Complete",
"mrc3yr": "129.95",
"lastActivity": "Proposal (1,098) published (Prop20180531-1947)"
},
{
"prospectName": "mothra",
"opportunityName": "big",
"nrc3yr": "2705250.00",
"salesCode": "RTB",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 280,
"prospectAge": "153",
"activityDate": "06-12-2018",
"opportunityAge": 13,
"numberOfLocations": 501,
"locationServiceCount": "Dedicated (501), EoF Symmetric (500), POTS (500)",
"activityCreatedBy": "alexdev"
}],
"agencyOrSalesperson": "RTB",
"opportunityId": 691,
"salesManager": "RTB",
"stageAndStatus": "Proposal\/Complete",
"mrc3yr": "2797437.70",
"lastActivity": "Proposal (1,106) published (big prop 7)"
}]
}
The biggest problem I face at the moment, however, is that the function for subGridRowExpanded is never called. I have put a breakpoint and a console.log() call at the beginning of the routine, and the breakpoint is not hit and the console.log() message does not appear. It is like something is wrong with the setup for calling subGridRowExpanded, and I don't know what it is.
--
Further info -- if I comment out the grouping configuration, then clicking on the plus sign does invoke the subGridRowExpanded function. Is it possible that, in 4.7 jqGrid, one cannot use both grouping and subgrid in the same grid? The expansion only shows the new column headers, none of the data, I'm trying to figure out now why that would be. If there's a way to use both these features in the same grid, I'd like to know about it
indexproperties fromcolModel, which are absolutely unneeded. Additionally one should not userowNumwith small number (rowNum: 1) if the grid don't contain a pager. Such grid will just display the first rows (1 row only) even if the data has more rows. Free jqGrid fork of jqGrid, which I develop, uses in the caserowNum: 10000by default to prevent such misunderstandings. Please, include the version of jqGrid and the fork, which you use in the text of every jqGrid question. - Olegurl: "/salespoint/secure/funnel/opportunity/list/getDataMap"must be sorted bysalesManagerfor correct working of grouping if you use old version of jqGrid. Free jqGrid contains additional optionforceClientSorting: true, which will be used in combination withloadonce: true. It allows to load any data from the server, to sort and to filter (ifsearch:true,postData: {filters: ...}are used) the data locally (by jqGrid) and finally to display the first page of the result. - Oleg