How to display total of records in jqgrid - jqgrid

Question

I am trying to display total records in jqgrid.
Here is the code i am using to display.grid is displaying but i am not getting total.
and i am getting Error:footer-row is invalid propert
Can anyone tell me what is mistake?
$("#JqGrid").jqxGrid(
{
pagesize: 5,
source: dataAdapter,
width: 700,
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
filterable: true,
showfilterrow: true,
showtoolbar: true,
footerrow: true,
userDataOnFooter:true,
rendertoolbar: function (toolbar) {
var container = $("<div style='overflow: hidden; position: relative; margin: 3px;'></div>");
var exportButton = $("<div style='float: right; margin-right: 5px;'> <img style='position: relative; margin-top: 2px; width: 16px; height: 16px;' src='images/excel.png' /><span style='margin-left: 4px; position: relative; top: -3px;'>Export to Excel</span></div>");
container.append(exportButton);
toolbar.append(container);
exportButton.jqxButton({ width: 150, height: 20 });
exportButton.click(function (event) {
$("#JqGrid").jqxGrid('exportdata', 'xls', 'Report');
});
},
selectionmode: 'checkbox',
//rendertoolbar: function (toolbar) {
// var container = $("<div style='overflow: hidden; position:relative;margin:3px;'></div>");
// var exportButton = $("<div style='float:right;margin-right:20px;'><img style='position:relative;margin-top:2px;width:16px;height:16px' src='./images/excel.png'/><span style='margin-left:4px;position:relative;top:2px'>Export to Excel</span></div>");
// exportButton.jqxButton({ width: '130' });
// container.append(exportButton);
// toolbar.append(container);
//}
columns: [
{ text: 'VillageName', datafield: 'VillageName', width: 'auto' },
{ text: 'Samples Collected', datafield: 'VillageSamples', width: 'auto' }
],
gridComplete: function () {
calculateTotal();
},
});
var themeSetting = { theme: "darkblue" };
$("#JqGrid").jqxGrid(themeSetting);
var calculateTotal = function () {
var gridData = $("#JqGrid").jqGrid('getGridParam', 'data'),
i = 0, totalAmount = 0, totalTax = 0;
for (; i < gridData.length; i++) {
var rowData = gridData[i];
totalAmount += Number(rowData.VillageSamples);
}
$("#JqGrid").jqGrid('footerData', 'set', { name: 'TOTAL', VillageSamples: totalAmount });
}