How to format hours in grouping summary result in igGrid 2013.2? - infragistics

Question

I have grid with grouping and I group by one column and then make hours summary on another column like that :
name: "GroupBy",
type: "local",
columnSettings: [
{
columnKey: "codeName",
isGroupBy: true,
},
{
columnKey: "hour",
isGroupBy: false,
summaries: [
{
summaryFunction: "custom",
text: "Hours :",
customSummary: function (valuesList) {
var sumOfHours = 0.0;
var sumOfMinutes = 0.0;
for (i = 0; i < valuesList.length; i++) {
var split = valuesList[i].split(':');
sumOfHours += parseInt(split[0]);
sumOfMinutes += parseInt(split[1]);
}
sumOfHours += parseInt(sumOfMinutes / 60);
var minutesLeft = sumOfMinutes % 60;
return sumOfHours + ":" + minutesLeft;
}
}
]
}
],
summarySettings: {
//summaryFormat: "HH:MM" // What should I write here to get proper formatiing?
}
Now the problem is that whenever I get :
36 hours it displays 360.00 instead of 36:00
165 hours it displays 1,650.00 instead of 165:00
8 hours and 15 minutes it displays 815.00 insted of 8:15
34 hours and 15 minutes it displays as 3,415.00 instead of 34:15
I could not find anywhere in the docs how to display that properly. Can anybody help?

Answer 1

igGridGroupBy summary functions are expected to always return number type, which is not your case. That's why you see this behavior.
What you can do is to override the $.ig.formatter function (before initializing igGrid) which is used in Ignite UI and GroupBy feature for formatting values and inject your logic.
Here is an example:
var origFormatter = $.ig.formatter;
$.ig.formatter = function (val, type, format) {
if (format === "myFormat") {
return val;
}
return origFormatter.apply(arguments);
}
// Initialize igGrid here
And then set the summarySettings.summaryFormat = "myFormat" so that your logic kicks in.