This is an old revision of the document!


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,

<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>

Definition and parameters

To the custom formatter are passed the following parameters:

function myformatter ( cellvalue, options, rowObject )
{
// format the cellvalue to new format
return new_formated_cellvalue;
}
Note the return in the function. This function should always return a value in order to work correctly.
  • 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

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, unformat:myunformatfunc},
      ...
   ]
...
});
function myunformatfunc ( cellvalue, options)
{
   // do something here
   return unformated_value;
} 
</script>

To the custom unformat function are passed the following parameters:

  • cellvalue - is the value to be unformated
  • 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

Example

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

<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).text().replace("$","");
}
 
</script>

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

It is important to know, as seen in the example, that to the format function we pass the value as parameter, but to the unformat function we pas the jQuery-ed element.

Discussion

Hari Popuri, 2010/09/16 23:29, 2010/09/16 23:31

Hi,

When I use the above method to format cell nothing happening. I debug line by line and see there is no values passing to formatter function.

cellvalue is not defined, options is not defined, rowObject is not defined.

I want to change the row color based on the cell value. Please help me with this.

Thanks Hari

Girish Wakure, 2011/03/09 12:16, 2011/03/09 12:55

Hi, How can I get value of another column in that formatter.

eg . I have a Questions table. and I have created a link formatter like this.

<script type=“text/javascript”>

function formatOperations(cellvalue, options, rowObject) {
      return "<a href='/exam/editQuestion.html?q_id=" + cellvalue +"'><u>Edit</u></a>  "+
  	       "<a href='/exam/deleteQuestion.html?q_id=" + cellvalue +"'><u>Delete</u></a>";
  }

</script>

works fine when used with grid column q_id.

I want to show or hide the edit and/or delete links as per value from another gridcolumn value i.e status. How can I do that?

Give me a hint..

Thanks. Girish

Wojtek Kruszewski, 2011/10/04 07:18

I needed to create a lossy formatter, i.e. one that would *not* allow unformatting or getting original value back. As a workaround I'm storing full record data (also fields not displayed by jqGrid) attached to row DOM element. Here's more details: http://wojtek.oxos.pl/post/9423083837/fetching-original-record-values-in-jqgrid

http://wojtek.oxos.pl

Mike Kolenda, 2012/07/16 13:16

Hello, Girish.

Were you able to get a reply to your question? I have a similiar need to utilize values from other columns?

Thanks for any info you can pass along.

Regards, Mike

Ramesh, 2012/08/24 12:42

Hi all,

   I need to know how to merge different cell values and put it into a single cell...

could anyone please suggest the answer with a proper code.. i am new to jquery

Greg, 2013/02/01 20:48

@Girish,

You can access all of the cell values from the rowObject parameter to your formatter function. The rowObject is an array of all of the column values for the current row.

You could leave a comment if you were logged in.

QR Code
QR Code wiki:custom_formatter (generated for current page)