====== Custom Formatter ======
You can define your own formatter for a particular column. Usually this is a function. When set in the formatter option this should not be enclosed in quotes and not entered with () - show just the name of the function.For example,
 
<code javascript>
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
      ...
   ]
...
});

function currencyFmatter (cellvalue, options, rowObject)
{
   // do something here
   return new_format_value
}
</script>
</code>

===== Definition and parameters =====

To the custom formatter are passed the following parameters:

<code javascript>
function myformatter ( cellvalue, options, rowObject )
{
// format the cellvalue to new format
return new_formated_cellvalue;
}
</code>

<note>Note the return in the function. This function should always return a value in order to work correctly. </note>

  * cellvalue - is the value to be formatted
  * options - is an object containing the following element
     * options : { rowId: rid, colModel: cm} where rowId - is the id of the row colModel is the object of the properties for this column getted from colModel array of jqGrid
  * rowObject - is a row data represented in the format determined from datatype option. If we have datatype: xml/xmlstring - the rowObject is xml node,provided according to the rules from xmlReader If we have datatype: json/jsonstring - the rowObject is array, provided according to the rules from jsonReader
\\ \\ 
===== Unformatting =====

As mentioned in [[Predefined Formatter]] chapter all predefined types are compatible with the editing modules. This means that the numbers, links, e-mails, etc., are converted so that they can be edited correctly. Also the methods (like getRowData and getCell) that get data, used this unformat in order to get the original value.
The question is: What to do if we use a custom formatter function and want to to have the original value back if we use editing or methods getRowData and getCell?

The answer is: You can use your own custom unformatter function to do that. This function can be used in colModel

Show image and edit image's path:

<code javascript>
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},
      ...
   ]
...
});

function imageFormat( cellvalue, options, rowObject ){
	return '<img src="'+cellvalue+'" />';
}
function imageUnFormat( cellvalue, options, cell){
	return $('img', cell).attr('src');
}
</script>
</code>

To the custom unformat function are passed the following parameters:
  * cellvalue - is the value to be unformated (pure text).
  * options - is an object containing the following element
     * options : { rowId: rid, colModel: cm} where rowId - is the id of the row colModel is the object of the properties for this column getted from colModel array of jqGrid
  * cellobject - is a jQuery cell object. This object can be used to obtain different things from the cell element - by example jQuery(cellobject).html() can be used to get the html content instead of the text.

===== Example =====

Below we will simulate partial currency formatter using a custom format and unformat functions

<code javascript>
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency},
      ...
   ]
...
});

function currencyFmatter (cellvalue, options, rowObject)
{

   return "$"+cellvalue;
}
function  unformatCurrency (cellvalue, options)
{

   return cellvalue.replace("$","");
}

</script>
</code>

If the value that is inserted or updated in the grid is 123.00, the in the grid it will be displayed as: $123.00;
When we use getRowData or getCell methods or any editing module the value for this column will be 123.00

===== Creating common formatter function=====
There are times where you maybe want to use your custom format/unformat functions in many places into the code. This of course can be done defining the functions as example above.
We have designed the formatter module so that it can be easy extended from the developer and doing it so make the development process easy.
Below we will discuss how to make your own formatter functions to be visible all into the code. \\ \\
After loading the jqGrid Java Script files you can define in script tag the following (or simple create your own file and include it into the head section)
<code javascript>
<script type="text/javascript">
jQuery.extend($.fn.fmatter , {
    currencyFmatter : function(cellvalue, options, rowdata) {
    return "$"+cellvalue;
}
});
jQuery.extend($.fn.fmatter.currencyFmatter , {
    unformat : function(cellvalue, options) {
    return cellvalue.replace("$","");
}
});

</script>
</code>

Then in your code you just need to do:
<code javascript>
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:'currencyFmatter'},
      ...
   ]
...
});
</code>
Note that in this case you will not need to specify the unformat function.