Dojo Data Grid – Part 1: Default Features (including infinite scrolling!)

The Dojo Data Grid control is pretty easy to use, once you have the basic concepts down.

Within an hour of beginning to learn about it, I was able to surface this basic grid, based on David Leedy’s FakeNames database, which can be found at xpagescheatsheet.com:

Grid1_1

General Concepts

At a high level, here are the steps that are involved in creating a grid:

  • Create a REST service to provide the grid data
  • Add a Dojo Data Grid control and link it to the REST service
  • Add columns to the grid

This may sound intimidating if you haven’t used REST services or grids, but it really is pretty easy to pick up once you go through it the first time.

Infinite Scrolling!

The grid provides an amazing feature right out of the box — infinite scrolling! There is no paging through the grid; just keep dragging the scroll bar down and it will keep fetching additional rows.

More Default Features

Here are some more of the features that are provided based on the default settings for the grid:

  • Column widths are adjustable. Just click on the right edge of the column header and drag to change the width.
  • The current row is highlighted as you move the mouse over it.
  • Extended selection mode is enabled by default, which allows you to select a single row, control + click to select multiple non-consecutive rows, or shift+click to select consecutive rows; however, we will need to add functionality in order to take action.
  • The grid automatically takes up 100% of the available width, based on its container.
  • Column headers are clickable and they show arrows to indicate that they are sorting, but they don’t seem to actually sort the data by default, even though the grid does refresh.

Much more to come

Stay tuned, there are several enhanced features that can be easily incorporated, so we’ll cover them soon.

In the next two posts, I’ll discuss how to set up a REST service to provide the data for the grid and the steps to surface your first grid.

Advertisements

5 responses to “Dojo Data Grid – Part 1: Default Features (including infinite scrolling!)”

  1. Alan Hurt says :

    Having used the dojo grid before, here’s my experience on the sorting. The default state of the grid is unsorted; the 1st click sorts ascending, the second descending.

    If the data loaded into a grid from a REST service is already sorted in the view, say in ascending order, then the first click to sort a column will do nothing and sort of makes the grid look unresponsive even though the sorting arrow appears

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: