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:

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.

Number

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

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

Other Formats

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
});