Formatting

You can define your own formatter for a particular column. Usually this is a function. The code written is in Java Script.
The definition of custom function should be done in the current jQuery scope in order to be visible or included from javascript file in the head section of the document.

Below is a example:

<?php
...

$grid ->setColProperty('field', array("formatter"=>"js:currencyFormatter"));


$customCode = << CUSTOM

function currencyFmatter (cellvalue, options, rowObject)
{
   // do something here
   return new_format_value
}
CUSTOM;


$grid->setJSCode( $customCode );
...

?>

To the custom formatter are passed the following parameters:

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

• 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

<?php
...

$grid ->setColProperty('field', array("formatter"=>"js:currencyFormatter", "unformat"=>"js:unformatCurrency"));


$customCode = << CUSTOM

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

function  unformatCurrency (cellvalue, options, cell)
{
 
   return cellvalue.replace("$","");
}
CUSTOM;


$grid->setJSCode( $customCode );
...

?>

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
  
• cell - 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.
  

Events

Because of the nature of the formatter events attached to the values in the cell can not use the jQuery syntax directly. A way to attach event is to use the gridComplete event where all data is loaded and we can attach events. Bellow we will demonstarte how to attach a click event.

<?php
...

$grid ->setColProperty('field', array("formatter"=>"js:currencyFormatter", "unformat"=>"js:unformatCurrency"));


$customCode = << CUSTOM

 
function currencyFmatter (cellvalue, options, rowObject)
{
   var id = options.rowId;
   return "<span class='myclass' rowid='"+id+"'>$"+cellValue+"</span>"; 
}

function  unformatCurrency (cellvalue, options, cell)
{
 
   return $(cell).text().replace("$","");
}
CUSTOM;

$complete = << COMPL
function()
{
    $(".myclass").bind('click',function( e ) {
        var theid = $(this).attr('rowid');
        alert('rowId='+theid+' cell value'+$(this).text());
    });
}
COMPL;

$grid->setJSCode( $customCode );
$grid->setGridEvent( 'gridComplete', $complete );
...

?>