The Grid and Events
It looks easy enough. You click a grid row, the row highlights, and you extract the search term from the list. But where do you start? Is the grid a table? Do the cells have IDs?
Luckily, you don't have to piece together the cigar name by "screen-scraping." Remember that grids have a model. The model has all the unprocessed data in it. If you could just get the clicked row and map it to an item in the model, you could easily get the value you need.
Fortunately, the Grid widget provides hooks for you called events. You are probably already used to HTML's familiar events such as onClick or onMouseOut. These are the DOM level 0 events. Grid events are similar and are named things like onRowDoubleClick or onCellHover. As we'll learn in Section 6.2, Connecting to User-Defined Events with Dojo, on page 117, these are Dojo user-defined events that carry rich event information to functions we provide.
We'll save most of the information for later. But for now, let's just dive right into an event function for onRowClick:
Download xhr_techniques/yahoo_remote_script_demo.html
<table id="grid" dojoType= "dojox.grid.Grid" store="wishStore" query="{ wishId: '*' }" clientSort="true"> <script type="dojo/connect" event="onRowClick" args="evt">
var searchTerms = this.model.getRow(evt.rowIndex).description; console.debug(searchTerms); </script> <thead> <tr>
<th field="description" width= "15em">Cigar</th> <th field="size">Length/Ring</th> <th field= "origin">Origin</th> <th field="wrapper">Wrapper</th> <th field="shape">Shape</th> </tr> </thead> </table>
That <script> tag looks strange. Generally, <script> tags have type= "text/javascript", right? Browsers, upon finding a type= they don't recognize, will simply skip over it. That's good for us. We don't want the browser to simply execute this code on page load. Making the type "dojo/connect" tags this script for use only by Dojo.
The args= attribute takes a list of JavaScript variable names and matches these up with the signature parameters. You can consider them the formal parameters of the method. So when Dijit calls the handler code, it will put the event object into the variable evt, which you can then use in the body of the handler. (Recall that handler is synonymous with callback.)
Let's work from the inside out on that assignment statement. Events such as onRowClick send useful information through the argument, in our case evt.
One of the properties in evt is rowlndex, which contains the 0-based index of the row we just clicked. That's useful. Then this.model.getRow (this meaning the grid) gets the row hash, which looks exactly like the hash in our model. For example, this.model.getRow(2) is just the following: {
"wishId": 4457, "description": "Black Pearl Rojo Robusto", "size": "4 3/4-52",
"origin": "Nicaragua", "wrapper": "Natural", "shape": "Straight" }
We just grab the description property, and we're done!
That's pretty elegant. The method is defined right in the tag that needs it, and a lot of the infrastructure is there for you. so, where do you find these events? And how do you know the event data passed back? One way is to consult the online guide at http://www.dojotoolkit.org, which lists all the event method signatures. As far as grid goes, we'll be talking a lot about events in Chapter 14, Grid, on page 366 as well.
Post a comment