title: JQGrid custom formatter not working
body: <p>I am trying to use a custom formatter for jqgrid in my Ruby on Rails application, but I am having terrible difficulty in getting it to respond.</p>
  
  <p>Here is the function I am using:</p>
  
  <pre><code>function YNFormatter(cellvalue, options, rowObject)
  {
       var color = (cellvalue &gt;= 10) ? "green" : "red";
  
      return '&lt;span style="background-color:' + color + ';"&gt;' + cellvalue + '&lt;/span&gt;';
  }
  </code></pre>
  
  <p>However, my grid still displays, but without any formatting occurring.</p>
  
  <p>Also, to give context, below is the rest of the jqgrid code for my index.html.erb with the above function included:</p>
  
  <pre><code>&lt;div id="ItmDisplay"&gt;&lt;/div&gt;
  
  &lt;table id="grid" class="jqInquiryGrid tblGen tblInlineEdit"&gt;&lt;/table&gt;
  &lt;div id="gridPager"&gt;&lt;/div&gt;
  
  
  &lt;script&gt;
      $("#grid").jqGrid({
          url:'http://localhost:3000/ItmList',
          datatype: "json",
          altRows:true,
          altclass:'oddRow',
  
          jsonReader : {
            root:"itmdata",
            page: "currpage",
            total: "totalpages",
            records: "totalrecords",
            cell: "itmrow"
          },
  
          rowNum:10, 
          rowList:[10,20,30], 
          mtype: "GET",
  
          width:796,
          hidegrid:false,
          loadonce: true,  
  
          pager: 'gridPager',
  
          sortname: 'id', 
          viewrecords: true, 
          sortorder: "asc",
  
          search: true,
  
          height: 250,
          width: 600,
          colNames: ['Itm No', 'Title', 'Quantity', 'Category'],
          colModel: [{
              name: 'id',
              index: 'id',
              width: 30,
              sorttype: "int"},
          {
              name: 'title',
              index: 'title',
              width: 90,
              sorttype: "String"},
          {
              name: 'quantity',
              index: 'quantity',
              width: 90,
              sorttype: "float"},
          {
              name: 'category',
              index: 'category',
              width: 80,
              sorttype: "String"}
          ],
          caption: "Items List    ",
          // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
      });
  
  function YNFormatter(cellvalue, options, rowObject)
  {
      var color = (cellvalue &gt;= 10) ? "green" : "red";
  
      return '&lt;span style="background-color:' + color + ';"&gt;' + cellvalue + '&lt;/span&gt;';
   }
  
  
  
      $("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){loadForm(rowid);}});
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script&gt;
  // Global variable to hold the record id currently being dealt with 
  item_id = 0;
  
  // Function to load the edit form for a given id via AJAX
  function loadForm(id) {
      path = "/items/" + id + "/edit"
      item_id = id;
      $("#ItmDisplay").load(path);
  }
  
  // function to return the current record id
  function get_item_id() {
      return item_id;
  }
  
  $(document).delegate('form', 'submit', function(e) {
       e.preventDefault();
        var valuesToSubmit = $(this).serialize();
  
    // Rails path to pass the update request to    
     updatePath = '/items/' + get_item_id();
  
  $.ajax({
    url: updatePath, //submits it to the given url of the form
    type: "post",
    data: valuesToSubmit,
    dataType: "JSON" 
  }).success(function(json){ // the json variable holds the return from the server (JSON Object)
    //act on result.
    $("#ItmDisplay").text("Record Successfully Saved!!").fadeOut(3500);
  
    var $myGrid = jQuery("#grid");
    data = $myGrid.jqGrid('getGridParam', 'data');
    index = $myGrid.jqGrid('getGridParam', '_index');
    var rowId = json.id, itemIndex = index[rowId], rowItem = data[itemIndex];
    console.log(rowItem);
    rowItem.title = json.title;
    rowItem.quantity = json.quantity;
    rowItem.category = json.category;
    console.log(rowItem);
    $myGrid.jqGrid('setRowData',json.id,rowItem);
  
  });
   });
  
  &lt;/script&gt;!
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/kE2jA.png" rel="nofollow">jqrid output</a></p>
  
  <p>If anyone knows what I am doing wrong, your help would be very gratefully appreciated! Thanks.</p>