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

Let’s take a look ta some of the effects of some of the available grid properties, in no particular order.

Grid Width

By default, the grid will take up the entire width of its container.

Grid4_BeforeAutoWidth

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.

Grid4_autoWidthProperty

Grid4_AutoWidth

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.

Row Selector

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.

Grid4_rowSelectorProperty

Grid4_rowSelector

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.

Loading Message

The loadingMessage property (All Properties > basics > loadingMessage) defines the message to display at the top of the grid when it is loading data.

Grid4_Loading

If you don’t set this property, it defaults to “Loading…”.

Error Message

The errorMessage property (All Properties > basics > errorMessage) defines the message to display when the grid runs into an error retrieving data.

Grid4_ErrorMsg

If you don’t set this property, it defaults to “Sorry, an error occurred…”

Auto Height

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.

dir

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.

Grid4_Dir

Up Next

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.

Advertisements

7 responses to “Dojo Data Grid – Part 4: Additional Grid Features”

  1. Dennis Jones says :

    Nice tutorial Brad! Looking forward to the next installment.

  2. edm00se (@edm00se) says :

    Any possibility of covering use of the Enhanced Dojo DataGrid? Specifically with UP1/ExtLib JSON REST service. I’m interested in some of the features the (non-Enhanced) DataGrid doesn’t quite provide. Specifically, live column filtering, in-grid data editing/saving, and exports (CSV, etc). I’ve seen some other demos, but looking for the nuts and bolts.

    Thanks for the great series!

    • Brad Balassaitis says :

      Thanks!

      I’m looking into several of those features to cover them. I was actually working on the post for editable columns last night, so that will be out in a week or two. I’m working on getting some of the enhanced plugins to work with in the grid control and will definitely write it up if I can get it working. They’re straightforward to use without the grid control, but I need to find the right point to hook them in while using the grid control.

  3. Vijay O says :

    It is very useful article. It helped me a lot.. Thanks for great posts/

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: