5 Tips for Configuring Ignite UI Grid Columns

The default settings found in the Ignite UI igGrid make working with data easy, but with a little customization you can quickly change how the data appears in each column.

1. Manually Define Columns

The first step to taking control of how data renders in the grid is to turn off autoGenerateColumns and manually define columns to explicitly set each of the column’s options.

Options available for each column are:

Setting	Description
dataType	Represents the data type of the underlying data for the field being bound to the column.
format	Defines how the grid should interpret the data in the column to format for display in the grid cell.
formatter	References a function that is responsible for formatting the column value.
headerText	Text string that appears in the header of the column.
hidden	Boolean value indicating whether or not the column is hidden from the when the grid is rendered.
key	Points to key value used to look up the data value to render in the cell.
template	String-based template for customizing the contents of the cell.
width	Pixel-based value for the width of the column.

2. Define the format

The format column option allows you to take control over how the data is rendered in the grid for a specified column. Depending on what type of data is provided to the column the format options vary.

Date

The following table depicts how the different format modes render the raw date value of 8/13/2012.

Format	Result
date	8/13/2012
dateLong	Monday, August 13, 2012
dateTime	8/13/2012 3:34 PM
time	3:35 PM
timeLong	3:35:17 PM
MM/dd/yyy	08/13/2012
MMMM	August
mmm-d, yy	Aug-13, 12
yy	12
h:mm:ss tt	3:37:40
dddd d MMM	Monday 13 Aug

Number

The following table depicts how the different format modes render the raw number value of 151324.912834098234.

Format	Result
number	151,324.91
int	151,325
currency	$151,324.91
percent	151,324.91%
#.###	151,324.913
0.000	151,324.913
0	151,325
double	151,324.91

Note: The double format is similar to number, with unlimited maximum number of decimal places.

Other Formats

Format	Description
string	No special formatting – renders the string value as-is in from the data source.
bool	Renders the string ‘true’ when the value is true and nothing when the value is false.
checkbox	Renders a checked checkbox image (not an input element) if the value is true and an unchecked image if the value is false.

3. Use the {0} replacement token for strings

When working with string typed columns, you can use the {0} replacement token to represent the incoming data value in a format string. For example if you want to add the standard prefix of “INV” to an identification string in the grid you can define the format as:

$("#grid").igGrid({
	columns: [
	{
		headerText : "Part",
		key: "PartNumber",
		format: "INV-{0}"
	}],
	autoGenerateColumns: false,
	dataSource: data
});

4. Add a formatter Function

The formatter option points to a function that allows you to evaluate the incoming data value and implement custom logic. The formatter function must take an argument of the incoming value and must return a string.

Consider a grid where you want to indicate whether or not a contact is a minor by adding the string “(minor)” next to the age value in the column. The resulting formatter function would look something like this:

function ageFormatter(age) {
	if(age > 18){
		age += " (minor)";
	}

	return age;
}

To use the function you set the formatter option to point to the function:

$("#grid").igGrid({
	columns: [{
		headerText: "Age",
		key: "Age",
		dateType: "number",
		formatter: ageFormatter
	}],
	
	autoGenerateColumns: false,	
	dataSource: data
});

The formatter function is then run each time a value is bound to that column for each row.

5. Create a Custom Template

If you want to have fine-grained control and use data from other columns in your column format, then you want to create a custom template. The template engine used for grid columns is a string-based template so a simple template which renders a contact’s first name would look like this:

template: "${firstName}"

This approach works well if you are injecting in the data from the given column you are defining. If you want to make data from another column available to your template, then you must include a hidden column which is bound to the key you need in your template. The following template demonstrates how to create a link around the person’s first name using the person’s ID:

$("#grid").igGrid({
	columns: [
	{
		hidden: true,
		key: "ID"
	},
	{
		headerText: "First Name",
		key: "firstName", 
		template: "${firstName}"
	}],
	autoGenerateColumns: false,
	dataSource: data
});

---