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