Issue getting FooterData in JqGrid

Question

I have JqGrid I need to add column values and display in footer data of that column. I have implemented all things as per below code. I am getting footer row in interface but the value showing as 0.000 (not adding). not sure where I'm going wrong.

colmodels = [
    {
        name: 'capacityId',
        hidden: true,
        ignoreCase: true,
    },
    {
        name: 'arrayId',
        hidden: true,
        classes: 'arrayId'
    },
    {
        name: 'isNewRow',
        hidden: true,
        classes: 'isNewRow'
    },
    {
        name: 'Action',
        label: 'Action',
        width: 90,
        resizable: true,
        search: false,
        rowNum: 10,
        ignoreCase: true,
        formatter: function (cellvalue, options, rowobject) {

            if (rowobject.isNewRow == 'true') {
                return '<div class="text-center ">' +
                    '<a class="icon_color pr-2" ><i class="fa fa-trash deleteModifyRow" title="Delete"></i></a>' +
                    '</div>';


            } else {
                return '<div class="text-center ">' +
                    '<a onclick="OpenEditModel(this)" class="icon_color pr-2" ><i class="fa fa-pencil"  title="Edit" ></i></a>' +

                    '<a class="icon_color pr-2" ><i class="fa fa-plus addModifyRow" title="Add"></i></a>' +
                    '</div>';
            }
        }
    },
    {
        name: 'category',
        label: 'Category',
        resizable: true,
        ignoreCase: true,

    },
    {
        name: 'subCategory',
        label: 'Sub Category',
        resizable: true,
        ignoreCase: true,

    },
    {
        name: 'plantCode',
        label: 'Plant Code',
        classes: 'text-right',
        resizable: true,
        ignoreCase: true,

    },
    {
        name: 'sizeRange',
        label: 'Size Range',
        resizable: true,
        ignoreCase: true,
        formatter: function (cellvalue, options, rowobject) {
            return '<div class="text-center ">' +
                '<span><input type="text" class="form-control sizeRange" id="sizeRangeGrid" value="' + rowobject.sizeRange + '"></input></span>' +
                '</div>';
        }
    },
    {
        name: 'CapacityInlakhs',
        resizable: true,
        label: 'Capacity in lakhs',
        ignoreCase: true,
        hidden: true,
        sorttype: 'number',
        //ignoreCase: true,
        summaryType: 'sum',
        formatter: 'integer',
        formatoptions: {
            decimalSeparator: '.', decimalPlaces: 0, suffix: '', thousandsSeparator: ',', prefix: ''
        }
    },
    {
        name: 'CapacityInlakhs',
        resizable: true,
        label: 'Capacity in lakhs',
        ignoreCase: true,
        formatter: function (cellvalue, options, rowobject) {
            return '<div class="text-center ">' +
                '<span><input type="text" class="form-control number"  id="capacityGridValue" data_Capacity = "true" ,step=".00001"  min="0" max="9999.00000" value="' + rowobject.capacityInlakhs + '"/></span>' +
                '</div>';
        } 
    }
],

    $("#capacityGrid").jqGrid({
        datatype: 'local',
        data: JsonData,
        mtype: 'GET',
        colModel: colmodels,
        loadonce: true,
        viewrecords: true,
        footerrow: true,
        pager: '#pager',
        //rowNum: 10,
        rowNum: gridcount,
        scroll:1,
        gridComplete: function () {
            var objRows = $("#capacityGrid tbody tr");
            var objHeader = $("#capacityGrid tbody tr td");

            if (objRows.length > 1) {
                var objFirstRowColumns = $(objRows[1]).children("td");
                for (i = 0; i < objFirstRowColumns.length; i++) {
                    $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width"));
                }
            }
            //CAPACITY VALUE TO LAKHS
            $(".number").keyup(function () {
                if (Boolean($(this).attr("data_Capacity")) == true) {
                    this.value = this.value.replace(/[^0-9.]/g, '');
                };
            });

            $(document).on('keydown', "#capacity", function (event) {
                if (this.value > 9999.99999) {
                    this.value = 0
                } else {

                    if (event.shiftKey == true) {
                        event.preventDefault();
                    }
                    if ((event.keyCode >= 48 && event.keyCode <= 57) ||
                        (event.keyCode >= 96 && event.keyCode <= 105) ||
                        event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
                        event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190
                        || (event.keyCode == 110)
                    ) {
                        //below code for, To remove 2nd occurence of Decimal
                        let decimalString = $(this).val();
                        if (decimalString.indexOf('.') > -1 && (event.keyCode == 190 || event.keyCode == 110)) {
                            event.preventDefault();
                        }
                    }
                    else {
                        event.preventDefault();
                    }
                    if ($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
                        event.preventDefault();
                }
            });

            LoadAutoComplete();
        },
        loadComplete: function (data) {
            var $grid = $('#capacityGrid');
            debugger;
            $grid.jqGrid('footerData', 'set', { sizeRange: "Total" });
            $grid.jqGrid('footerData', 'set', { 'CapacityInlakhs': ($grid.jqGrid('getCol', "CapacityInlakhs", false, "sum")).toFixed(3) }, false);

        }

    });
$("#capacityGrid").jqGrid('filterToolbar', {
    autosearch: true,
    stringResult: false,
    searchOnEnter: false,
    defaultSearch: "cn"
});

I tried changing position of hidden columns (showed in internet) way to solve it. I need final total of column "CapacityInlakhs"

Answer 1

Changing the positions will not help. The nutshell of the problem you have lie in the fact that you use a custom formatter for that field. Moreover you custom formatter creates a input field which additionally make the problem deeper.

The method getCol works only on data which is displayed into the grid and does not work on input fields created in the grid manually (like you) or with inline editing. See here

Your solution is to create a corresponding unformat function for that field like this (Not tested)

.....
        name: 'CapacityInlakhs',
        resizable: true,
        label: 'Capacity in lakhs',
        ignoreCase: true,
        formatter: function (cellvalue, options, rowobject) {...},
        unformat : function( cell, options, cellobject) {
            return $('input', cellobject).val();
        }

Regards