Dojo Data Grid – Part 20: Icon Columns

In the last post, we saw how to pass HTML content through a grid column. In this post, we’ll take a look at how to display an icon in a grid column, including the alternate method of passing through HTML content that is required to make this work.

Dojo Data Grid Series

• Part 1: Concepts and Default Features
• Part 2: Creating a REST Service
• Part 3: Creating Your First Grid
• Part 4: Additional Grid Features
• Part 5: Grid Column Features
• Part 6: Reordering Columns
• Part 7: Sorting
• Part 8: Opening Documents
• Part 9: Multi-Row Entries
• Part 10: Full-Text Searching and Field-Specific Filtering
• Part 11: Editable Columns
• Part 12: Highlighting Edited Rows
• Part 13: Create a Dojo EnhancedGrid
• Part 14: Enhanced Filtering with No Coding
• Part 15: Enhanced Printing
• Part 16: Exporting Grid Data
• Part 17: EnhancedGrid Drag and Drop
• Part 18: Context Menus
• Part 19: Pass-Through HTML Content in Grid Columns

Here’s an example of a grid that is designed to show an icon that denotes the quality of the NFL football team that residents of a city root for:

I had assumed that the technique shown in the previous post could also be used to display an icon in a grid column, but it didn’t work. The image tags were always stripped out and all that made it through to the browser was the alt text of the image.

Fortunately, there’s another way to go about it. The good news is that this alternate method also provides a simpler, more secure way to display HTML content in the grid!

Column Formatter

The answer lies in a grid column feature that we looked at earlier in the series — the column’s formatter property, which can be set to the name of a client-side JavaScript function that will modify the column data.

The function can be placed in an Output Script block on the page or in a JavaScript library. A formatter function automatically receives a parameter that is the value of the column data. It can process the data however it needs to and then return the value to display.

Set the grid column control’s formatter property (All Properties > data > formatter) to the name of the formatter function. In this example, I’ve created a function called displayIcon().

Below is the source code of the function. It will check the value and return an HTML image tag to display an image that’s in the current database as an image resource.

Note in the screen shot above that the grid column is set to display the city column from the REST service. So, the formatter function is receiving a city name and sending back the image to display in its place.

// Conditionally return an image tag to display an icon in a cell
function displayIcon (value) {
  var image = '';

  switch (value.toLowerCase()) {
    case "dallas":
      image = '<img alt="" src="awful_team.gif" />';
      break;
    default:
      image = '<img alt="" src="good_team.gif" />';
      break;
  }

  return image;
}

Easier, More Secure Pass-Through HTML

Not only is this method simpler than creating a custom REST service column, it’s also more secure. With this method of generating the image tags, we did not have to set the grid’s escapeHTMLInData property to true.

Formatter functions can be used to return much more pass-through HTML content without having to expose the grid to potential code injection problems.