Home ›

Dojo's Industrial-Strength Grid Widget

Issue 182

From Issue #182
June 2009

Jun 01, 2009  By Matthew Russell
 in
Dojo's grid widget provides a fierce alternative to the paginated table that has become such a mainstay of modern-day Web application interfaces.

Listing 3. Simple Data Grid


<html>
<head>
  <title>Simple Data Grid</title>

  <link rel="stylesheet" type="text/css" href=
  "http://o.aolcdn.com/dojo/1.2/dojo/resources/dojo.css"/>
  <link rel="stylesheet" type="text/css" href=
  "http://o.aolcdn.com/dojo/1.2/dijit/themes/tundra/tundra.css"/>
  <link rel="stylesheet" type="text/css" href=
  "http://o.aolcdn.com/dojo/1.2/dojox/grid/resources/Grid.css"/>
  <link rel="stylesheet" type="text/css" href=
  "http://o.aolcdn.com/dojo/1.2/dojox/grid/resources/tundraGrid.css"/>

  <style type="text/css">
    #gridNode {
       width: 200px;
       height: 200px;
    }
  </style>

  <script type="text/javascript"
          src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js"
          djConfig="parseOnLoad:true">
  </script>

  <script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.parser");
  </script>
</head>
<body class="tundra">
  <!--Fetch data from a store -->
  <span dojoType="dojo.data.ItemFileReadStore"
        jsId="gridStore"
        url="data.json">
  </span>

  <!-- Define the grid directly in markup and allow the parser
       to take care of the rest -->
 <table id="gridNode" dojoType="dojox.grid.DataGrid" store="gridStore">
    <thead>
      <tr>
        <th width="50%" field="id">ID</th>
        <th width="50%" field="label">Label</th>
      </tr>
    </thead>
  </table>
</body>
</html>

Aside from declaring the ItemFileReadStore and DataGrid in markup, the only other change to note is that the parseOnLoad configuration switch was provided to the SCRIPT tag that loads Dojo.

The dojo.parser module also was included as a dependency, because it's what actually scans the BODY of the page for dojoType tags and instantiates any widgets that are found. Depending on your programming background and your project's overall design, you may prefer markup-driven development to a script-driven approach. Dojo provides facilities for you to accomplish the very same objectives either way, so you're covered in either case and have the flexibility to choose.

Managing the Selection

A discussion of every possible DataGrid property or method is well beyond the scope of this article, but it's worthwhile to walk through a few of the more common operations you'll likely need to get up and running. Once you have a grid loaded with data, it's likely that one of the first things you'll want to do is determine what is selected and access the data contained in the selection. The DataGrid exposes a property called selection that is a fairly sophisticated Object providing the key methods for retrieving and manipulating the selection. Recalling that the way to retrieve a reference to a widget is through the dijit.byId method, you can gain access to the selection from Listing 3 simply by calling dijit.byId("gridNode").selection. Using Firebug or consulting the source code or on-line documentation, you would discover a number of useful properties. A few of the most commonly used include:

  • getSelected(): returns an array of dojo.data items that are reflected by the current selection.

  • select(/*Integer*/ idx): sets the current selection to the row index identified.

  • deselect(/*Integer*/ idx): removes the row index from the current selection.

  • selectRange(/*Integer*/startIdx, /*Integer*/ endIdx): selects the rows identified by the start and end indexes, inclusively.

  • clear(): clears the selection.

  • onSelected(/*Integer*/ idx): an extension point that can be overridden to supply custom functionality whenever a particular row is selected.

  • onDeselected(/*Integer*/ idx): an extension point that can be overridden to supply custom functionality whenever a particular row is deselected.

Consider the following examples to get an idea of how you might put the DataGrid's selection property to work: 

/* Assume a grid identified by a node with id=gridNode
 * that has lots of rows and no selection */

/* select rows 11-20 inclusive */
dijit.byId("gridNode").selection.selectRange(11,20);

/* Attach a custom event handler for row selection */
dijit.byId("gridNode").selection.onSelected = function(idx) {
  console.log("onSelected", idx);
};

/* Clears the selection and reselects only row 13.
 * Note that the onSelected event handler fires. */
dijit.byId("gridNode").selection.select(13);

As with many OSS projects, the only authoritative API reference is the source code itself or the documentation generated directly from it, so check there for a complete listing and for more details.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Excellent article

siva's picture
Submitted by siva (not verified) on Thu, 08/06/2009 - 08:38.

Excellent article .

White Paper
More Resources
Fabric-Based Computing Enables Optimized Hyperscale Data Centers

Today’s modular x86 servers are compute-centric, designed as a least common denominator to support a wide range of IT workloads. Those generic, virtualized IT workloads have much different resource optimization requirements than hyperscale and cloud applications. They have resulted in a “one size fits all” enterprise IT architecture that is not optimized for a specific set of IT workloads, and especially not emerging hyperscale workloads, such as web applications, big data, and object storage. In this report, you will learn how shifting the focus from traditional compute-centric IT architectures to an innovative disaggregated fabric-based architecture can optimize and scale your data center.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions