jqGrid summary for time column

by tpeczek

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<table id="grid"></table>

JavaScript

$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;

var mydata = [
    { id:"1", client: 'Preview client', service:"Netlogiq", processes: 102, worked: '00:00' },
    { id:"2", client: 'Neinceput', service:"Netlogiq", processes: 100, worked: '838:59' },
    { id:"3", client: 'Neinceput', service:"Netlogiq", processes: 100, worked: '26:13' },
    { id:"4", client: 'Neinceput', service:"Netlogiq", processes: 100, worked: '00:00' },
    { id:"5", client: 'Neinceput', service:"Netlogiq", processes: 100, worked: '00:13' },
    { id:"6", client: 'Neinceput', service:"Netlogiq", processes: 100, worked: '00:00' }
];

function toMinutes(hhmmString) {
    var parts = hhmmString.split(':');
    return (+parts[0]) * 60 + (+parts[1]); 
}

function toHHMMString(minutes) {
    var hh   = Math.floor(minutes / 60);
    var mm = minutes - (hh * 60);

    if (hh < 10) {
        hh   = "0" + hh;
    }

    if (mm < 10) {
        mm = "0" + mm;
    }

    return hh + ':' + mm;
}

function timeSummary(val, name, record) {
    return toHHMMString(toMinutes(val || '00:00') + toMinutes(record[name] || '00:00'));
}

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    height: 'auto',
    colNames:[ 'Client', 'Service', 'Processes', 'Worked' ],
    colModel:[
        { name: 'client', index:'client' },
        { name: 'service', index:'service' },
        { name: 'processes', index:'processes', summaryType: 'sum', summaryTpl: '<b>Total: {0}</b>' },
        { name: 'worked', index:'worked', summaryType: timeSummary, summaryTpl: '<b>Total: {0}</b>' }       
    ],
    sortname: 'client',
    grouping: true,
    groupingView: {
        groupField: ['client'], 
        groupSummary: [true], 
        groupColumnShow: [true],
        groupText: ['<b>{0}</b>'], 
        groupCollapse: false, 
        groupOrder: ['desc']
    },
    caption: "jqGrid summary for time column"
});