Predefined Formatter

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.

In this section, we discuss the Predefined Formatter.

In order to use the formatting features, make sure you check the box for the Formatter module when you download jqGrid. For more information refer to Download jqGrid.

Default language formatting options are defined in the language files e.g., grid.locale-xx (where xx is the two character code for your language, en for English).

That means that the Formatter options are loaded when the grid javascript files are loaded.

Here are the default Formatter options for the English file:

jQuery.jgrid = {
...
   formatter : {
     integer : {thousandsSeparator: " ", defaultValue: '0'},
     number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},
     currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},
     date : {
       dayNames: [
         "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",
         "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
       ],
       monthNames: [
         "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
         "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
       ],
       AmPm : ["am","pm","AM","PM"],
       S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'},
       srcformat: 'Y-m-d',
       newformat: 'd/m/Y',
       parseRe: /[Tt\\\/:_;.,\t\s-]/,
       masks : {
         ISO8601Long:"Y-m-d H:i:s",
         ISO8601Short:"Y-m-d",
         ShortDate: "n/j/Y",
         LongDate: "l, F d, Y",
         FullDateTime: "l, F d, Y g:i:s A",
         MonthDay: "F d",
         ShortTime: "g:i A",
         LongTime: "g:i:s A",
         SortableDateTime: "Y-m-d\\TH:i:s",
         UniversalSortableDateTime: "Y-m-d H:i:sO",
         YearMonth: "F, Y"
       },
       reformatAfterEdit : false
     },
     baseLinkUrl: '',
     showAction: '',
     target: '',
     checkbox : {disabled:true},
     idName : 'id'
   }
...

Here you will find all the settings that you may want to review or change before using the predefined formats. These settings can also be overridden for specific columns using the formatoptions parameter in the colModel.

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

jQuery("#grid_id").jqGrid({
...
   colModel : [
   ...
      {name:'myname', ... formatter:'number', ...},
   ...
   ],
...
});

The example above will format the contents of the 'myname' column according to the rules set for 'number' in the active language file. For example, if the source value is “1234.1”, then the value that actually will be put in the grid will be “1 234.10” using the options above.

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:

jQuery("#grid_id").jqGrid({
...
   colModel : [
   ...
      {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,
   ...
   ],
...
});

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

Below is a list of the predefined format types

The select type is not real select. This is used when we use some editing module and have edittype:'select'. Before this release we pass the value of the select in grid and not the key. For example:

<script>
jQuery("#grid_id").jqGrid({
...
   colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ],
...
});
</script>

In this case, the data for the grid should contain “One” or “Two” to be set in the column myname.

Now, with this setting

<script>
jQuery("#grid_id").jqGrid({
...
   colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]
...
});
</script>

the data should contain the keys (“1” or “2”), but the value (“One”, or “Two”) will be displayed in the grid.

Let's suppose that we have the following definition in colModel for the format type showlink:

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', formatter:'showlink', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...} 
      ... 
   ]
...
});
</script>

This will output the following:

http://localhost/someurl.php?id=123&action=edit

If you want to overwrite the id setting in the link and replace this with myid, then the following should be set

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', formatter:'showlink', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...} 
      ... 
   ]
...
});
</script>

this will output:

http://localhost/someurl.php?myid=123&action=edit

But i don't know where from is value'123' ;