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

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 :

1. 36 hours it displays 360.00 instead of 36:00
2. 165 hours it displays 1,650.00 instead of 165:00
3. 8 hours and 15 minutes it displays 815.00 insted of 8:15
4. 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.