Dojo Data Grid – Part 19: Pass-through HTML Grid Columns

By default, the grid will escape any HTML content in your data. In this post, I’ll show how to pass HTML data through a column of any type of Dojo grid.

Dojo Data Grid Series

Here’s an example of a grid with 3 columns displaying HTML content. All three of the columns combine the first and last name fields. The first column displays the value in bold and italics. The second column displays it within an H2 tag. The third column displays an HTML button that, when clicked, will pop up an alert that displays the name.

Grid20-PassThruHTML

Steps

Here are the steps required to pass HTML data through a grid column:

  1. Create a custom column in the REST service with HTML content
  2. Add a Dojo Data Grid Column and set it to display the HTML content column
  3. Set a grid property to prevent escaping the HTML data

If you already have HTML content in the data in the underlying view, then you do not need to create a custom column in the REST service, so you can skip to step 2.

1. Create a custom column in the REST service with HTML content

In order to add a custom column that reads data from the underlying view entry, we need to first set the var property of the REST service (All Properties > basics > service > var). This provides a variable that we can use to access the view entry.

To add a custom column, click the plus (+) icon in the columns property of the REST service (All Properties > basics > service > columns)

Set the name property to define the name of the column and then click the diamond next to the value property and write Server-Side JavaScript to compute the value.

Here is the full source code of the REST service used in the screen shot above. In each of the column values, you can see the SSJS used to compute the value.

<xe:restService id="restJsonService" pathInfo="gridData">
  <xe:this.service>
    <xe:viewJsonService defaultColumns="true" viewName="ByName-First" var="gridEntry">
      <xe:this.columns>
        <xe:restViewColumn name="BoldItalicName">
          <xe:this.value><![CDATA[#{javascript:return '<b><i>' + gridEntry.getColumnValue('firstname') + ' ' + gridEntry.getColumnValue('lastname') + '</i></b>';}]]></xe:this.value>
        </xe:restViewColumn>
        <xe:restViewColumn name="H2Name">
          <xe:this.value><![CDATA[#{javascript:return '<h2>' + gridEntry.getColumnValue('firstname') + ' ' + gridEntry.getColumnValue('lastname') + '</h2>';}]]></xe:this.value>
        </xe:restViewColumn>
        <xe:restViewColumn name="ButtonName">
          <xe:this.value><![CDATA[#{javascript:var fullName = gridEntry.getColumnValue('firstname') + ' ' + gridEntry.getColumnValue('lastname');
return '<input type="button" value="Display Name" onclick="alert(\'' + fullName + '\');">';}]]></xe:this.value>
        </xe:restViewColumn>
      </xe:this.columns>
    </xe:viewJsonService>
  </xe:this.service>
</xe:restService>

2. Add a Dojo Data Grid Column and set it to display the HTML content column

Now that the columns with HTML content have been added to the REST service, we just need to add Dojo Data Grid Column controls to the grid for each column to display. Set the field property of the grid column to the value of the name property defined in the REST service column.

3. Set a grid property to prevent escaping the HTML data

The last step is to set a property on the grid to prevent it from displaying this content as plain text.

The grid’s escapeHTMLInData property will do the trick. Set this property to false in order to see the pass-through HTML content.

Up Next

In the next post, we’ll take a look at how display icons in grid columns, as well as an alternate method of displaying HTML content.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: