Dojo Data Grid – Part 3: Creating Your First Grid

In the series overview, I mentioned that there are 3 high-level steps to creating a Dojo Data Grid. In the last post, I showed how to create the REST service to provide data for the grid. In this post, I’ll show how to create the grid and add columns to it.

Dojo Data Grid Series

• Part 1: Concepts and Default Features
• Part 2: Creating a REST service

Creating the Grid

With the Extension Library or Domino Designer 8.5.3 Upgrade Pack 1, you will find the Dojo Data Grid control in the Dojo Layout section of the Controls view in DDE.

Just drag it onto an XPage or Custom Control and you’ll see it on the page with a single facet. This is where you add columns to display data in the grid.

At this point, if you view the page, there will be nothing displayed, because there is no data for the grid.

Connecting the Grid to the REST Service

To provide data for the grid, you can connect the grid to the REST service that will provide its data.

To do so, set the storeComponentId property of the grid properties (All Properties > data > storeComponentId) to the ID of the REST service. (This is the ID of the REST service and not the pathInfo value.)

Adding Columns to the Grid

All that’s left now is to tell the grid what to display.

To add a column to the grid, just drag and drop a Dojo Data Grid Column control (from the Dojo Layout section of the Controls view) into the Dojo Data Grid facet and set its field property to the name of a field in the REST service.

If you are using default columns in the REST service, then the field name will match the programmatic name of the column from the underlying view. If you have created your own columns for the REST service, then the field name will match the name property of the column that you defined. See my last post on Part 2: creating a REST service to learn how to verify the REST service data and see the field names.

Hello, Grid

Now you can view the page and see that you’ve successfully surfaced your first grid!

You can change the column width and scroll infinitely through the data.

To fill out the grid, just add more Dojo Data Grid Column controls and set their field properties.

Up Next

In the next post, I’ll dig in to more features of the grid control that are readily available.