Simple Dojo Data Grid using Zend injected JSON Data

Submitted by muneer on Sat, 12/31/2011 - 09:26
 
 
 
Printer-friendly version

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.

The resource used:

Screenshot of Dojo Grid

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

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
	protected function _initDoctype()
	{
		$this->bootstrap('view');
		$view = $this->getResource('view');
		$view->doctype('XHTML1_STRICT');
		// Adding Dojo helpers to the view
		$view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper'); 
		$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer(); 
		$viewRenderer->setView($view);
		Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
	}
}

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

<?php
  	$this->dojo()->setDjConfigOption('usePlainJson',true)
        ->addStylesheetModule('dijit.themes.claro')
        ->setLocalPath($this->baseUrl('js/dojo/dojo.js'));
 
	echo $this->dojo();
?>

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.
 

// class UsermanageController extends Zend_Controller_Action
// IndexAction().
public function indexAction()
{
     // Optional contents goes here.
     $someContent = new Application_Form_UserManage();       
 
     $this->view->contents = $someContent;
}

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

<?php $this->headLink()->appendStylesheet($this->baseUrl() . '/js/dojox/grid/resources/claroGrid.css'); ?>
<?php $this->dojo()->enable(); 
	$this->dojo()->requireModule('dojox.data.QueryReadStore')
				->requireModule('dojox.grid.DataGrid');
?>

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.
 

public function loadusersAction()
    {
    	// Load current data.
    	$this->_helper->layout->disableLayout();
    	$this->_helper->viewRenderer->setNoRender();
 
    	$user = new Application_Model_DbTable_User();
    	$users = $user->fetchAll();
    	$dojoData = new Zend_Dojo_Data('id', $users, 'id');
    	echo $dojoData->toJson();
   }

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

<span dojoType="dojox.data.QueryReadStore" jsId="users" url="/EzDocMan/public/Usermanage/loadusers"></span>

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 <div id="grid1" dojoType="dojox.grid.DataGrid" store="users" structure="structure"></div>

Done!!

Full Code of used files :
layout.phtml

<?php echo $this->doctype() ?>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">
<head>
">http://www.w3.org/1999/xhtml">
<head>
</a>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Document Library</title>
  <?php echo $this->headLink()->appendStylesheet($this->baseUrl('/css/global.css')); ?>
  <?php echo $this->headScript()->appendFile($this->baseUrl('js/ezdocman.js')); ?>
  <?php
  	$this->dojo()->setDjConfigOption('usePlainJson',true)
        ->addStylesheetModule('dijit.themes.claro')
        ->setLocalPath($this->baseUrl('js/dojo/dojo.js'));
 
	echo $this->dojo();
	?>
</head>
<body class="claro">
<div class="content">
    <?php echo $this->layout()->content; ?>
  </div>
<?php echo $this->inlineScript() ?>
</body>
</html>

 
index.phtml
<?php $this->headLink()->appendStylesheet($this->baseUrl() . '/js/dojox/grid/resources/claroGrid.css'); ?>
<?php $this->dojo()->enable(); 
	$this->dojo()->requireModule('dojox.data.QueryReadStore')
				->requireModule('dojox.grid.DataGrid');
?>
<div id="view-content">
<?php $this->tabContainer()->captureStart('tabcontainer', array(), array('style' => 'width:100%;height:400px;')) ?>
 
	<?php $this->contentPane()->captureStart('tab1', array(), array('title' => 'User Manager')); ?>
 
	<script type="text/javascript" >    
	  var structure = [ 
	        { field: 'id', name: 'UserID', width: '50px' },
	        { field: 'username', name : 'User Name', width: '100px' },
	        { field: 'mail', name : 'E Mail', width: '200px'}
	     ]; 
	</script>
	<span dojoType="dojox.data.QueryReadStore" jsId="users" url="/EzDocMan/public/Usermanage/loadusers"></span>
	<div id="grid1" dojoType="dojox.grid.DataGrid" store="users" structure="structure"></div> 
 
	<?php echo $this->contentPane()->captureEnd('tab1'); ?>
<?php echo $this->tabContainer()->captureEnd('tabcontainer'); ?>
</div>

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.

Tags:

Add new comment