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

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.

Grid_4_1

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.

Grid_4_2

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.)

Grid_4_3

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.

Grid_4_4

Hello, Grid

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

Grid_4_5

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.

Advertisements

9 responses to “Dojo Data Grid – Part 3: Creating Your First Grid”

  1. Eric McCormick (@edm00se) says :

    I had a question which I thought was quick and figured I’d ask here, but it turns out to be a bit on the lengthy side. I put it up on stack overflow. I’m getting “blank” rows for documents a user account has with less visibility (based on Readers fields) in my Dojo DataGrid. If anyone is looking to follow it, or contribute an answer, I’d be thoroughly geeked out.

    Love the series Brad. May I suggest a follow-on post when the primary series is complete, perhaps on common pitfalls and work arounds?

    http://stackoverflow.com/questions/16339613/dojo-datagrid-8-5-3-up1-returning-blank-rows-based-on-readers-field

  2. Tony Frazier says :

    Brad, first thanks for this entire series of posts — extremely helpful and very very well put together. I followed the posts to I think around number 10, no issues with anything. I was using a completely blank database and simply creating a new xpage and dropping in the dojo grid controls. Got excited because it was all working so well, wanted to update my in-development app with what I learned so far. But can’t get it to work there. I have narrowed it down to using the Application Layout control. Back in my sandbox db, I created a custom control, ccLayout, dropped in the Application Layout control, accept defaults for all except enable drop target on middle column. Create new xpage and drop in ccLayout, drop Dojo Data Grid, drop couple of columns. But no grid displayed. I can validate the REST service with the pathInfo url. I can create the Dojo Data Grid outside/above the ccLayout and it work fine. Just not working when in the ccLayout middle. I suspect it has something to do with facets and such, or maybe even something with my environment. but I am really just beginning my XPages journey and not sure where to start.

    Apologize for this getting so long for a comment. Perhaps better on StackOverflow? Appreciate any insights.

    • tonyfrazier says :

      Brad, thanks for your help offline, truly appreciated. Once I created a new custom control, added the REST service and Dojo Grid to it, then added this custom control to content area on the Application Layout, it worked. Not sure why I have to do this, but that’s a battle for another day. Again, thanks and will look you up at MWLUG.

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: