title: jqGrid custom formatter for userData
body: <p>Is there any workaround to add custom 'formatter' to <code>userData</code> in jqGrid? i found <a href="https://stackoverflow.com/questions/5878900/jqgrid-issue-with-footer-text-format">this</a> question and it helps me a lot. below is the code that i use to populate jqGrid. please note that i populate a custom <code>userData</code> object in the <code>jsonReader</code> and set it to the grid in <code>loadComplete</code> i need to add separate 'formatter' to total columns. please let me know if there is a way. Thanks in advance.</p>
  
  <pre><code>var userDataTotals;
  jq("#testGrid").jqGrid({
      url:'local',
      datatype: 'local',
      mtype: 'GET',
      colNames:[
                'rowId','unitId',
                '&lt;fmt:message key="report.col1"/&gt;',
                '&lt;fmt:message key="report.col2"/&gt;',
      ],
      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' &amp;&amp; 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 &amp;&amp; rowObject.projectTypeName =='IOD'){
                  return 'N/A';   
              }
              var now = new Date(cellvalue);
              return now.format('M j, Y');
          }
      }
  </code></pre>
  
  <p>i use custom <code>dateFormat.js</code> to format the date.</p>
  
  <p>and the json Response is - </p>
  
  <pre><code>{
      "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": ""
  }
  </code></pre>
  
  <p>i used <code>sortType</code> as <code>integer</code> because from the server i am passing a 'java' <code>Date</code> object directly to the grid. in order to sort it i need to set <code>sortType</code> to <code>integer</code></p>
  
  <p>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 <code>userData</code> total values as 'hyperlinks'. </p>
  
  <p>without <code>userData</code> formatting i can see the totals in IE8. so that i am thinking that without using the column <code>'formatter'</code> adding a custom formatter to the total values (<code>userData</code>).</p>