Module name: jquery.fmatter.js

Description: Formatter supports advanced formatting of the contents of cells in form, in-line and cell editing.

Formatter can be used in either of two ways: Predefined and Custom.

Predefined formats

Default formatting functions are defined in the language files e.g., grid.locale-xx (where xx is your language). To modify these, open the language file and search for "$.jgrid.formatter". Here you will find all the settings that you may want to review or change before using the predifined formats. These settings can also be overridden for specific columns using the FormatOptions parameter, described below.

The second step is to set the desired formatting in colModel. This is done using the option formatter. For example

colModel :[
        ...
    {name:'myname', ... formatter:'number', ...},
        ...
]

The predefined types are

• integer
  
• number
  
• currency
  
• date (uses formats compatable with php function date. For more info visit www.php.net)
  
• checkbox
  
• mail
  
• link
  
• showlink
  
• select (this is not a real select but a special case for editing modules. See note below)
  

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.

Note: Type = 'Select'

colModel : [
    {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}}
...
]

Now, with this setting

colModel : [
    {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}}
...
]

Custom formats

You can define your own formatter for a particular row. 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,

colModel:[
...
   {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
...
]

jqGrid passes 3 parameters to this function:

• el - the element
  
• cellval - the cell value
  
• opts - a set of options containing
  
  • rowId - the id of the row
    
  • colModel - the colModel for this column
    
  • rowData - the data for this row
    

The array looks something like this: {rowId: row.id, colModel:cm, rowData:row}

For example:

currencyFmatter = function(el, cellval, opts){
   $(el).html(formatCurrency(cellval));
}

function formatCurrency(num) {
    if(!num) return;
    num = num.toString().replace(/\$|\,/g,'');
    if(isNaN(num))
        num = "0";
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num*100+0.50000000001);
    cents = num%100;
    num = Math.floor(num/100).toString();
    if(cents<10)
        cents = "0" + cents;
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
        num = num.substring(0,num.length-(4*i+3))+','+
              num.substring(num.length-(4*i+3));
    return (((sign)?'':'-') + '$' + num + '.' + cents);
}

Formatter Options

Formatter options can be defined for particular columns, overwriting the defaults from the language file. This is accomplished by using the formatoptions array in colModel. For example:

colModel : [
...
{name:"myname"... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: " ", decimalPlaces: 2, prefix: "$ "}},
...
]

This definition will overrite the default one from the language file. In formatoptions should be placed values appropriate for the particular format type

formatter: ’showlink’, formatoptions: {baseLinkUrl: ’someurl.php’, addParam: ‘&action=edit’}
This will output: http: // localhost / someurl.php?id=123&action=edit