title: How to add custom Formatter for jqgrid with dynamic column binding
body: <p>This is almost continuation of a previous question. <a href="https://stackoverflow.com/questions/5111653/problem-showing-jqgrid-with-dynamic-column-binding">Problem showing jqgrid with dynamic column binding</a> </p>
  
  <p>I am trying to put a Custom Formatter for the columns like below. But nothing happens. Please help. </p>
  
  <p>JSP: </p>
  
  <pre><code>   &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;script type="text/javascript"&gt; 
    $(document).ready(function() {
    $.ajax( {
      type : "GET",
      url : "interFinalTbaAction",
      data : "",
      dataType : "json",
      success : function(result) {
          var colD = result.couponStripList, colM = result.colModelList;
          jQuery("#InterFinalTBAGrid").jqGrid( {
              data : colD.rootVar,
              datatype : 'local',
              gridview : true,
              colModel : colM,
              loadComplete : function(data) {
              },
              loadError : function(xhr, status, error) {
                  alert('grid loading error');
              }
          });
      },
      error : function(x, e) {
          alert(x.readyState + " " + x.status + " " + e.msg);
      }
  });
    });
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;table id="InterFinalTBAGrid"&gt;
  &lt;tr&gt;
      &lt;td /&gt;
  &lt;/tr&gt;
   &lt;/table&gt;
   &lt;/body&gt;
   &lt;/html&gt;  
  </code></pre>
  
  <p>The JSON result from action:</p>
  
  <pre><code> {
  "colModelList": [
      {
          "formatter": "CouponFormatter",
          "index": 0,
          "jsonmap": null,
          "key": false,
          "label": "Coupon",
          "name": "coupon",
          "resizable": true,
          "search": true,
          "sortable": false,
          "title": true,
          "width": 100
      },
      {
          "formatter": "InterFinalPriceFormatter",
          "index": 1,
          "jsonmap": null,
          "key": false,
          "label": "03-10-11",
          "name": "prceCM",
          "resizable": true,
          "search": true,
          "sortable": false,
          "title": true,
          "width": 150
      },
      {
          "formatter": "InterFinalPriceFormatter",
          "index": 2,
          "jsonmap": null,
          "key": false,
          "label": "04-13-11",
          "name": "prceCMPlusOne",
          "resizable": true,
          "search": true,
          "sortable": false,
          "title": true,
          "width": 150
      },
      {
          "formatter": "InterFinalPriceFormatter",
          "index": 3,
          "jsonmap": null,
          "key": false,
          "label": "05-12-11",
          "name": "prceCMPlusTwo",
          "resizable": true,
          "search": true,
          "sortable": false,
          "title": true,
          "width": 150
      },
      {
          "formatter": "InterFinalPriceFormatter",
          "index": 4,
          "jsonmap": null,
          "key": false,
          "label": "06-13-11",
          "name": "prceCMPlusThree",
          "resizable": true,
          "search": true,
          "sortable": false,
          "title": true,
          "width": 150
        }
     ],
     "couponStripList": {
      "rootVar": [
          {
              "coupon": 5.0,
              "prceCM": "103.734375,103.734375",
              "prceCMPlusOne": "103.359375,99.03",
              "prceCMPlusThree": "102.671875,102.671875",
              "prceCMPlusTwo": "103.015625,103.015625"
          },
          {
              "coupon": 5.5,
              "prceCM": "105.984375,105.984375",
              "prceCMPlusOne": "105.671875,99.2",
              "prceCMPlusThree": "105.046875,105.046875",
              "prceCMPlusTwo": "105.359375,105.359375"
          }
  
      ]
     },
     "deliveredDataTimestamp": "03-02-11 11:52:57",
     "requestedTimestamp": null
     }
  </code></pre>
  
  <p>The Javascript functions for formatters:</p>
  
  <pre><code>  function CouponFormatter(cellValue, opts, rowObject) {
  return cellValue + "Testing coupon formatter";
     }
  
  function InterFinalPriceFormatter(cellValue, opts, rowObject) {
  return cellValue + "Testing price formatter";
  }
  </code></pre>