Dojo Data Grid – Part 4: Additional Grid Features
In the last few posts, I showed the steps required to surface a Dojo Data Grid based on data provided by a REST service. This post explores some of the additional properties of the Dojo Data Grid control.
Dojo Data Grid Series
- Part 1: Concepts and Default Features
- Part 2: Creating a REST Service
- Part 3: Creating Your First Grid
Let’s take a look ta some of the effects of some of the available grid properties, in no particular order.
By default, the grid will take up the entire width of its container.
There isn’t a property to change this per se, but you can add a dojo attribute to the grid (All Properties > dojo > dojo attributes) with the name autoWidth and set its value to true to have the grid size itself based on the width required.
The initialWidth property (All properties > format > initialWidth) will set the width of the grid, but it will only take effect if the dojo attribute autoWidth is enabled. The values must be specified with a unit (such as 500px, rather than just as 500), in order to work.
The rowSelector property (All properties > format > rowSelector) defines the size of a row selection column to the left of each row, which can be used to select the row. The value must specify a unit as well, like the initialWidth property.
Passing Through HTML Content
The escapeHTMLInData property (All properties > basics > escapeHTMLInData) defines whether HTML content in the grid data can be passed through to the browser. By default, HTML content is escaped.
The loadingMessage property (All Properties > basics > loadingMessage) defines the message to display at the top of the grid when it is loading data.
If you don’t set this property, it defaults to “Loading…”.
The errorMessage property (All Properties > basics > errorMessage) defines the message to display when the grid runs into an error retrieving data.
If you don’t set this property, it defaults to “Sorry, an error occurred…”
The autoHeight property (All Properties > basics > autoHeight) defines the number of rows to display in the grid. It will still scroll infinitely regardless of this setting.
The behavior seems a little odd to me. I would expect that it would display the number of view entries that I specify, but I noticed that it shows less if there is data in a grid cell that wraps. However, I don’t see an exact correlation to the number of rows it’s displaying, even counting some entries as multiple rows. I also noticed that if I stretch the grid cells so that there is no data wrapping, the number of rows displayed slightly higher than the number of rows I’ve specified.
And the number of rows displayed seems to change as I make columns wider and narrower.
At this point, I’ll just assume this is a general target for the grid. To ensure the height, it might be wiser to fix the size of the containing the grid.
Rows Per Page
The hover help for the rowsPerPage property (All Properties > basics > rowsPerPage) says that it specifies the number of rows to display. However, it seems to have no bearing whatsoever on the number of rows to display.
It appears that it actually defines the number of rows to retrieve from the REST service with each call. I’ve noticed that the number specified in this property seems to be number of rows refreshed into the grid at a time. It will quickly fill in the entire page, but I can see it refreshing in chunks of rows equal to this number.
The dir property (All Properties > basics > dir) defines the directional display of the grid. It defaults to display Left to Right, but it’s interesting to note how easily it can be reversed. And the setting can be computed, so keep that in mind if using a grid in a multilingual application.
One interesting quirk, though, is that it seem so to lose the column headers when the direction is set to Right to Left.
In the next post, we’ll take a closer look at properties of the Dojo Data Grid Column controls to see how they can be customized.