FormatGrid

How to format th Grid Columns.

Predefined Formatter

There are several predefined formatter available. For details about each formatter and the format options please take a look into the jqGrid Wiki.

Currency formatter example

<sjg:gridColumn 	
	name="creditLimit" 
	...
	formatter="currency" 
	...
/>

Integer formatter example

<sjg:gridColumn 
	name="id"
	key="true"
	...
	formatter="integer"
	...
/>

Date formatter example

The following example shows how to format a date. The JSON result give us a date formatted like this "Y-m-d H:i:s'" and now we want to show this in e.g. German date format.

<sjg:gridColumn
	name="dateColumn"
	...
	formatter="date"
	formatoptions="{newformat : 'd.m.Y H:i', srcformat : 'Y-m-d H:i:s'}"
	...
/>

Custom formatter

This example is taken form the Grid Showcase. This steps describe how to open an custom dialog from a grid column.

Create a jQuery UI Dialog

<sj:dialog 
	id="employees_details" 
	title="Employee Details" 
	autoOpen="false" 
	modal="true"
	width="400"
>

Create two JavaScript Functions

1. Create an URL to struts2 action
2. Create a function that formats your column
3. Create a function which loads and open your dialog

<s:url var="empurl" action="employees-detail" />
<script type="text/javascript">
	function formatLink(cellvalue, options, rowObject) {
		return "<a href='#' onClick='javascript:openDialog("+cellvalue+")'>" + cellvalue + "</a>";
	}
	function openDialog(employee) {
		$("#employees_details").load("<s:property value="empurl"/>?id="+employee);
		$("#employees_details").dialog('open');
	}
</script>

Grid column with custom formatter

<sjg:gridColumn 
	name="salesemployee.employeenumber" 
	index="employeenumber" 
	title="Employee" 
	...
	formatter="formatLink"
	...
/>