How to integrate a dojo DataGrid in Zend Framework - The Ossigeno Blog - Powered by Ossigeno 3.0_rc1

Posted by giorgio
On Mar 12, 2009 10:42:56 AM
Schermata.png
Thanks to dojo integration in Zend Framework, it becomes simple to produce a dojo grid, a "table on steroids" with sorting and selecting of elements on the client side. DataGrid is in the dojox namespace of 1.x version.
Creating a json data store
Data driven components like dojo Grid need a data store in a certain format to deal with data. We'll use Zend_Dojo_Data to output a json response containing out objects, that will be inserted in the rows of the table. You can pass pretty much anything that implements the Traversable interface to Zend_Dojo_Data (Iterator and IteratorAggregate does), or simply an array. The element of this collection must also either implements Traversable or being an associative array of fields that points to values. I use a Doctrine_Collection object, but an array of Zend_Db_Table_Row is the same.

// controller class
class ObjectsController extends Zend_Controller_Action
{
    public function init()
    {
        $this->_helper->ContextSwitch->setAutoJsonSerialization(false)
                                    ->addActionContext('index', 'json')
                                    ->initContext();
    }

    public function indexAction()
    {
        $this->view->collection = array(array('id' => 1, 'name' => 'Linus'),
             array('id' => 2, 'name' => 'Rasmus'));
    }
}


Setting auto serialization to false allows us to provide a custom view script, with the suffix .json.phtml, to output json data. Otherwise the view script would not be considered and assigned view variables would be serialized in json and echoed.

// index.json.phtml
$data = new Zend_Dojo_Data('id', $this->collection);
echo $data;

We set 'id' as the key field of dojo.data, and output it (using the magic __toString() method).

Realizing the grid (aka injecting steroids)

$this->dojo()->requireModule("dojo.data.ItemFileReadStore")
             ->requireModule("dojox.grid.DataGrid");
             $this->headStyle()->appendStyle('
                    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/grid/resources/Grid.css";
                    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/grid/resources/tundraGrid.css";
                    ');

?>
<div dojotype="dojo.data.ItemFileReadStore" id="store" jsid="jsonStore" url="/objects?format=json" />
<table dojotype="dojox.grid.DataGrid" id="gridNode" jsid="grid" query="{ id: '*' }" store="jsonStore"><thead><tr><th field="id">Id<th field="name">Name</th></tr></thead></table>


That's all. This is much simpler than it seems. Firstly, we require the dojo modules needed: those requireModule() calls would be translated to dojo.require() in a script in the head of document (I am supposing you're printing $this->dojo() in your layout script). Then, we include two stylesheets of the tundra theme from a dojo CDN to style up properly our grid.
In the markup, we set up declaratively two objects: the former is a data store that wraps the json response located at "/objects?format=json" and is named "jsonStore". The latter is a DataGrid, a type of dojo grid that can use directly a data store (while others have to use a model wrapper); this grid has to point to jsonStore with a query 'id equal to any'.
The jsId attributes will be used as name of global scope javascript variables that contains the dijit instances, for instance to access them on an addOnLoad closure.

Issues
Dojo does not make much error checking, sacrificing it for speed, so make sure the json output is valid (it must not contain anything out the curly brackets), or you would see a 'missing )' error because the json response is passed to eval(). Tipically this issue is caused by a response segment of html context rendered also in json one.
Without including the stylesheets, the grid does not work. Check also for rules in your css on the table tag that can cause the grid to collaps and to not show anything.

Conclusion
The grid comes with sorting on all fields by default, and with th tags you can decide what fields to show. For a much detailed customization like multiple rows, pagination and more, see the dojotoolkit.org documentation.
I will soon write a custom view helper to simplify the creation of a DataGrid. If you have questions, feel free to ask in the comments.
Have fun with a table on steroids!

Loading...