JSGrid Total Row

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div id="jsGrid"></div>

CSS

body {
  background: #fff;  
}

.jsgrid-cell { 
    overflow: hidden; 
}

.jsgrid-pager { text-align: center; }

.total-row {
  font-weight: bold;
  background: #f5f5f5;
}

.total-row td {
  border-top: 2px solid #efefef;
}

JavaScript

var data = [
    {
        "Name": "Product",
        "Sum": 10,
        "total": 50
    },
    {
        "Name": "Another Product",
        "Sum": 20,
        "total": 50
    },
    {
        "Name": "Third Product",
        "Sum": 30,
        "total": 50
    }
];

$("#jsGrid").jsGrid({
        width: "100%",
 
        autoload: true,
        inserting: true,
 				editing: true,
        controller: {
        	loadData: function() {
          	return data;
          }
        },
        
        onRefreshed: function(args) {
        	var items = args.grid.option("data");
          var total = { Name: "Total", "Sum": 0,  "total": 0, IsTotal: true };
          
          items.forEach(function(item) {
          	total.Sum += item.Sum;
            total.total += item.total;
          });
          
          var $totalRow = $("<tr>").addClass("total-row");
          
          args.grid._renderCells($totalRow, total);
          
          args.grid._content.append($totalRow);
        },
        onItemUpdated: function (item) {
                // Força  o refrsh
                $("#jsGrid").jsGrid("refresh")
            },
        
        fields: [
            { name: "Name", title:"Product", type: "text", width: "60%", validate: "required" },
            { name: "Sum", title:"Sum", type: "number", width: "30%", validate: "required" },
            { name: "total", title:"Total", type: "number", width: "30%", validate: "required" },
            { type: "control", width: "10%", editButton: false, 
            	itemTemplate: function(_, item) {
                if(item.IsTotal)
                	return "";
                return jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);  
              }
            }
        ]
    });