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 1. ItemFileWriteStore Example


<html>
<head>
  <title>ItemFileWriteStore Example</title>
  <script
      type="text/javascript"
      src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js">
  </script>
  <script type="text/javascript">
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.addOnLoad(
      function() {

        /* Creating a store with inline JavaScript data */
        var store = new dojo.data.ItemFileWriteStore({
          data : {
            identifier : "id",
            items : [
                     {"id" : 1, "label" : "foo"},
                     {"id" : 2, "label" : "bar"},
                     {"id" : 3, "label" : "baz"}
            ]
          }
        });

        /* Add another item - a synchronous operation */
        store.newItem({"id" : 4, "label" : "qux"});

        /* Fetch an item with id=4 - an asynchronous operation */
        store.fetch({
          query  : {id : 4},
          onItem : function(item) {
            console.log("Asynchronous callback for fetching item:",
                        item);

            /* Delete the item with id=4, a synchronous operation */
            store.deleteItem(item);

            /* Save the results */
            store.save();

            /* Could have reverted the results with 
               store.revert(); */
          }
        });
      });
</script>
</head>
<body>
</body>
</html>

Although the example in Listing 1 illustrates providing inline JavaScript data for the store to consume, the same data could just as easily have been provided by way of an I/O request to the server. For example, the store could have taken a URL parameter on construction, which would have fetched a file. Assuming its contents were the same JavaScript object identified by the data property in the previous example, the results would have been the same: 

/* Another way to create a store */
var store = new dojo.data.ItemFileReadStore({
  url : "/some/server/side/url"
});

For more information on the dojo.data API, consult Chapter 9 of Dojo: The Definitive Guide, on-line documentation available at the Dojo Campus, or read the API well-documented specs that are packaged in the Dojo source code itself in the dojo.data.api namespace.

Grid Fundamentals

With newly found knowledge of how to create and manipulate data stores, we're now ready to bind one of those stores to the grid widget. Listing 2 is a full-blown example of programmatically creating a simple DataGrid and attaching an ItemFileReadStore.

Listing 2. 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">
  </script>

  <script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.grid.DataGrid");

    dojo.addOnLoad(
      function() {
        /* Create a store with inline JavaScript data */
        var gridStore = new dojo.data.ItemFileReadStore({
          data : {
            identifier : "id",
            items      : [
                          {"id" : 1, "label" : "foo"},
                          {"id" : 2, "label" : "bar"},
                          {"id" : 3, "label" : "baz"}
            ]
          }
        });

        /* A simple layout that specifies column headers and
         * mappings to fields in the store */
        var gridLayout = [
                {name : "ID",    field : "id",    width : "50%"},
                {name : "Label", field : "label", width : "50%"}
        ];

        /* Programmatically construct a data grid */
        var grid = new dojox.grid.DataGrid({
                           store     : gridStore,
                           structure : gridLayout
                   }, "gridNode");

        /* Tell the grid to lay itself out since
         * it was programmatically constructed */
        grid.startup();
      });
</script>
</head>
<body class="tundra">
  <div id="gridNode"></div>
</body>
</html>

Figure 3. A simple grid created from Listing 2; column sorting is built in by default.

Additions to Listing 2 include adding some CSS files to style the grid and a few extra lines of script to specify column information. The final call to startup() is a fairly standard Dijit life-cycle method that needs to be called to tell widgets to lay themselves out when they are constructed programmatically.

Now, let's turn to creating a grid widget in markup. As you're about to see, creating a grid in markup is as simple as defining an HTML table structure (Listing 3).

______________________

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