Create Chained Select Boxes with the Dojo Libraries | 4 | WebReference

Create Chained Select Boxes with the Dojo Libraries | 4


[prev]

Dojo ItemFileReadStore to the Rescue

The Dojo core provides an implementation of a read-only data store called ItemFileReadStore. This store reads the JSON structured contents from an HTTP endpoint (service or URL) or from an in-memory JavaScript object and stores all the items in memory for simple and quick access. They can easily represent associated hierarchical data, but by chaining each list by the selected value, there is no need to do so. Here is a sample of the state.json file:

To include the data stores in your page, add the following HTML code:

You'll also have to import the module by adding dojo.require("dojo.data.ItemFileReadStore"); to the top of your JavaScript file.

Widget Declaration

Before you can instanciate widgets on the page, you have to define it by calling dojo.declare(). It accepts three parameters:

  1. The name of the Widget (Ours is called "widgets.ChainedSelect")
  2. One or more classes from which yours inherits from (We are extending the dijit.form.FilteringSelect class)
  3. An object literal that contains any additional properties and functionality that we are adding to the base class(es)

Is Anybody Listening?

The first of two new properties is the listeners array. I love the idea of having listeners to an object's events, because it doesn't limit us to having just one. We can add any type of new listener to this object by simply pushing it onto the listeners list. That way, you could update multiple controls at the same time. The listeners array is loaded in the postCreate() event as follows: The dojo.query() function finds all elements that have a parent attribute that is set to the ID of the current widget. We do not store the listener elements because they probably have not been converted into widgets yet, so their node structure is useless to us. Instead, only their ID is pushed to the listeners array.

In the onChange() event, a lookup is performed on each listener's data store using our second property, the lookupField. The query returns all of the items using the asterisk (*) symbol if there is no value selected from the parent listbox. Here is all of the JavaScript code to create our widget:

Widget Declaration

All that's left for us to do is add the HTML code for our widgets in the page. Set the attributes as follows:

  • The dojoType attribute to our widgets.ChainedSelect control.
  • The store to their respective stateStore and cityStore.
  • The child uses the state as the lookupField.

Putting the States and Cities ChainedSelects to the Test

When selecting from either listbox, the FilteringSelect provides some auto-complete suggestions for us:

Figure 1: Select with Suggestions

If we type in something that is not in the list and tab off of the field, a default error message is displayed:

Figure 2: Invalid State Entered

Selecting a valid state causes the city list to be populated with the associated cities:

Figure 3: Chained Selects in Action!

Feel free to place the files on your Web server and give the Chained Selects a try.

Today we saw how easily we could create chained select boxes using the Dojo libraries. In a future article, we will be exploring additional possibilities, including how to decouple the setting of the query property from the parent list's onChange() event handler, setting default items, clearing the previous selection, and more!


Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .

resides in Ottawa, Canada, and is the founder of GravelleConsulting.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!

Original: December 17, 2010


[prev]