Simple Dojo Data Grid using Zend injected JSON Data

There are several way we can work with Dojo Data Grid using Zend. All are very confusing until we are familier with the structure. I spent several hours on discovering the obstacle that are stopping me to get the right result on this. In this note, I am going to show a simple way on how to create a Dojo Data Grid using Zend Framework.

dojo-grid-screenshot

The resource used:

Step 1 : 
First of all we need to enable Dojo in the bootstrap file.

Then in the layout file. If not using layout, enable the Dojo in individual view files.

layout.phtml

And in body tag, append the class ‘claro’ as follows.

<body class="claro">

Step 2: 

Create a Controller/Action that render a default page with required libraries.

 

The above action will render the view named ‘index.phtml’. We need to append serveral scripts and stylesheet that are used by Dojo Data Grid. Inject the below code in to view file.

index.phtml

Step 3 :
Next we need to create JSON Request URL for retrieving data from the server. For this we have to create an action in a controller with layout disabled.

Zend_Dojo_Data easily converts the retrieved data into Dojo Data Grid acceptable JSON data format for us.

Step 4:

Capture the Data from the server in to dojo.data.QueryReadStore storage type.

ndex.phtml

 

Step 5:
Add a structure for the Data Grid using javascript within the template file.

index.phtml

Final :
Now add the div tag that is going to carry the DataGrid as follows.

index.phtml

 

Done!!

Full Code of used files :

layout.phtml

index.phtml

 

The above example is using simple way of building the DataGrid. There are more advanced features that can be integrated together. Please have a look at following resource to gain more understanding..

More Options & Suggestions :

If you are looking for something different then, you can try out the following Data Grids for Zend

  • ZFDatagrid
    ZFDatagrid has a great number of features that enables users to power up theirs Zend Framework applications. Also support many features like exporting data to PDF, XLS etc.
  • DataTables
    DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
  • Zend Framework DataGrid
    “Zend Framework DataGrid” is a project / component written in PHP5, specially developed to work with Zend Framework, aims to generate grids or list from a Data Source such Zend_Db_Table, Zend_Db_Select, Zend_Db_Adapter, Propel, Array, and so on. With features like sort columns (sort / order by), pagination and an appropriate render depending on the type of column.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

Please wrap all source codes with [code][/code] tags.

This site uses Akismet to reduce spam. Learn how your comment data is processed.