Here are some code examples:
var data = {
rows: [
{id:1, data:[1, "A", "12/31/2014", "12/31/2014", 0, 3187.53, 0, "Group A"]},
{id:2, data:[85, "A", "12/31/2014", "12/31/2014", 0, 2992.85, 204.56, "Group A"]},
{id:3, data:[32, "A", "12/31/2014", "12/31/2014", 0, 2992.85, 204.56, "Group A"]},
{id:4, data:[85, "B", "12/31/2014", "12/31/2014", 0, 2992.85, 204.56, "Group B"]}
]
};
report = new dhtmlXGridObject('report');
report.setImagePath("/scripts/dhtmlx/dhtmlxGrid/codebase/imgs/");
report.setSkin("dhx_skyblue");
report.enableAutoWidth(true);
report.enableAutoHeight(true);
report.setHeader("Shares,Tickers,Sales Date,Purchase Date,Cost,Proceeds,Gain/Loss,Group");
report.setInitWidthsP("10,10,15,15,10,20,20,0");
report.setColAlign("center,center,center,center,center,center,center,center");
report.setColTypes("ron,ro,ro,ro,ro,ron,ron,ro");
report.setColSorting("int,str,date,date,int,int,int,str");
report.init();
report.parse(data,"json");
report.groupBy(7);
The above will setup a nice table that is grouped by the last column named, surprisingly, Group.
I’d like to sum the following columns of each grouping: Cost, Proceeds, Gain/Loss
I do not see a way to accomplish this with the Grid API, so I’ve begun a manual solution:
var groups = ["Group A", "Group B"];
for (var i = 0; i<groups.length; i++) {
var cost = 0, proceeds = 0, gain_loss = 0;
report.forEachRowInGroup(groups[i],function(id){
console.log("On row ID "+id);
if(report.isItemExists(id)) {
cost += parseFloat(report.cellByIndex(id,4).getValue());
proceeds += parseFloat(report.cellByIndex(id,5).getValue());
gain_loss += parseFloat(report.cellByIndex(id,6).getValue());
}
});
}
This iterates through the first group, Group A, and sums the columns as expcted.
Unfortunately when the loop iterates to the 4th row, which would be in Group B, I receive the error I stated above:
Uncaught TypeError: Cannot read property ‘4’ of undefined
Which is where I attempt to getValue() on the 4th column of the current row.