Question

Is there any workaround to add custom ‘formatter’ to userData in jqGrid? i found this question and it helps me a lot. below is the code that i use to populate jqGrid. please note that i populate a custom userData object in the jsonReader and set it to the grid in loadComplete i need to add separate ‘formatter’ to total columns. please let me know if there is a way. Thanks in advance.

var userDataTotals;
jq("#testGrid").jqGrid({
    url:'local',
    datatype: 'local',
    mtype: 'GET',
    colNames:[
              'rowId','unitId',
              '<fmt:message key="report.col1"/>',
              '<fmt:message key="report.col2"/>',
    ],
    colModel :[ 
        {name:'rowId', index:'rowId',hidden: true,sortable: true,key:true}, 
        {name:'unitId', index:'unitId',hidden: true,sortable: true,key:true}, 
        {name:'outboundReadyDate', index:'outboundReadyDate', width:80,align:"center",sorttype:'integer',formatter:dateOnlyFmatter,datefmt:'Y M d'},
        {name:'outboundDate', index:'outboundDate', width:80,align:"center",sorttype:'integer',formatter:dateOnlyFmatter,datefmt:'Y M d'},
    ],
    // this will enable the footer row to display totals
    footerrow : true,
    //userDataOnFooter : true,
    altRows : true,
    //to hide pager buttons
    pgbuttons:false,
    recordtext:'',
    pgtext:'',
    gridview: true,
    height:270,
    loadonce: true,
    sortname: 'rowId',
    sortorder: 'asc',
    viewrecords: true,
    rowNum:30000,
    loadComplete: function() {
        // This will increase the column header height ( to show two rows in the header)
        jq(".ui-jqgrid-sortable").css('white-space', 'normal');
        jq(".ui-jqgrid-sortable").css('height', 'auto');
        //Set the total values after load complete,otherwise
        // custom formatter will format the total value as well.

        jq("#mainReportGrid").jqGrid("footerData","set",userDataTotals,false);

        //check the data type to avoid this code to  execute when the pageload
        var checkDatatype = myGrid.jqGrid("getGridParam","datatype");
        if(checkDatatype =='json' && myGrid.getGridParam('records') == 0){
            // when no records are displaying alert it to the user
            alert(noRecordsMsg);
        }

    },

    jsonReader : {
        root: "dtos",
        records: "records",
        repeatitems: false,
        cell: "cell",
        id: "rowId",
        userdata :function(obj) {
            userDataTotals = {"outboundReadyDate":obj.totalOutBounded,
                "outboundDate":obj.totalOutBoundReady};
        }

    },


    //This will format the date of the grid (without displaying time)
    function dateOnlyFmatter (cellvalue, options, rowObject){
        var opts = options.colModel.formatoptions;
        if(cellvalue==null || cellvalue=='undefined'){
            return '-';
        }else{
            if(opts != undefined && rowObject.projectTypeName =='IOD'){
                return 'N/A';   
            }
            var now = new Date(cellvalue);
            return now.format('M j, Y');
        }
    }

i use custom dateFormat.js to format the date.

and the json Response is –

{
    "dtos": [
        {
            "unitId": 1068,
            "outboundDate": null,
            "outboundReadyDate": 1317619303000,
            "rowId": 13,
        },
        {
            "unitId": 1105,
            "outboundDate": 1317616970000,
            "outboundReadyDate": 1317617213000,
            "rowId": 14,
        }
    ],
    "totalOutBounded": 0,
    "totalOutBoundReady": 4,
    "rowTotal": 15,
    "returnCode": 0,
    "msg": ""
}

i used sortType as integer because from the server i am passing a ‘java’ Date object directly to the grid. in order to sort it i need to set sortType to integer

Basic problem what i am having was in IE8 i cannot see the ‘userData’ total values. but in other browsers i can see it. i need to format userData total values as ‘hyperlinks’.

without userData formatting i can see the totals in IE8. so that i am thinking that without using the column 'formatter' adding a custom formatter to the total values (userData).

Answer 1

You have many small syntax errors:

• The usage of trailing comma (like ‘,}’) is a syntax error. You have to remove trailing comma from JSON data and from colNames and colModel. The "rowId": 13,} and "rowId": 14,} can’t be read.
• You define jQuery("#testGrid"), but use jQuery("#mainReportGrid") to set the footer.
• The url: 'local' or any other url parameter has no sense in case of datatype: 'local'. The url parameter will be just ignored (not used) in case of datatype: 'local'.
• You use myGrid which you not defined in the posted code. Either you should define var myGrid = jQuery("#testGrid"); somewhere at the beginning of your code or define var myGrid = $(this); at the beginning of loadComplete event handler.
• You use now.format('M j, Y') and not post the extension method format of the Date. You can use jqGrid method instead: return $.fmatter.util.DateFormat(undefined, now, 'M j, Y', $.jgrid.formatter.date);.
• I recommend you to use strict equality === always instead of == and !== instead of !=. Read for example here for more information.
• I recommend you to use height: 'auto' or scrollOffset: 0 if you use jqGrid without having scroll bars.

• I recommend you to read the answer. If you use the described bug fix you can modify the line jq("#mainReportGrid").jqGrid("footerData","set",userDataTotals,false); to the line

  myGrid.jqGrid("footerData", "set", myGrid.jqGrid('getGridParam', 'userData'), false);

  The variable userDataTotals will be not needed and the method userdata from the userdata can be defined as

  userdata: function (obj) {
return {
outboundReadyDate: obj.totalOutBounded,
outboundDate: obj.totalOutBoundReady
};
}

You can see here modified version of your code.