SCZF Tutorial - Using a grid to list data

This tutorial will show how you can create a grid and list data with SCZF. Basically, we will have a grid that is connected to a data source on a action and another action that is responsible to provide the data ( in Json format, but if you prefer, you can use XML ).

The complete source-code is available at the end of the page.

1) Make sure that you already installed SCZF

If you have not installed SCZF yet, check the Installation page.

2) Create a new action and view

On your controller, create two actions:

<?php

class IndexController extends Zend_Controller_Action
{
	public function indexAction()
	{
		// Show grid and datasource
	}

	public function listAction()
	{
		// Get data and return in json format
	}
}

And them create a view file only for index action. The list action won't need a view.

3) Include scripts

On your index view file, add the following code:

<?php
// Include SmartClient scripts
echo $this->ScGeneral()->includeScripts( 'js/isomorphic/' );

This is a function that automatically include the SmartClient scripts, just make sure to set the correct path.

4) Create the datasource

Add the following code to your index view file:

$this->ScDataSource()->addField( 'id' , 'Id' , true , null , null , false );
$this->ScDataSource()->addField( 'name' , 'Name' );
echo $this->ScDataSource()->create( 'datasourceID' , '/index/list' );

In this part of the script, we basically create a new ScDataSource and draw it. As this is a basic example, we are considering that our structure have just two fields: id ( that is a primary key ) and name.

The attributes of id field are:

Name of the Field: id
Title of the field: Id
Primary Key?: true
Foreign Key?: null
Root Value: 0
Can Edit: false

The attributes of name are:

Name of the Field: name
Title of the field: Name
Primary Key?: false ( default value )
Foreign Key?: null ( default value )
Root Value: 0 ( default value )
Can Edit: true ( default value )

And the attributes of the datasource:

Id: datasourceID
FetchURL: list.php ( this is the other script, that we will talk soon )

5) Create the grid

Add the following code to your index view file:

$options = array(
	'showFilterEditor' => true, 
	'canEdit' => false
);
echo $this->ScGrids()->create( 'gridID' , 'datasourceID' , 400 , 300 , $options );

Now, as we have the datasource, we can create the grid that is connected to this datasource.

The grid have the following attributes:

ID: gridID
DataSource: datasourceID ( this is the datasource that we created on step 3 )
Width: 400
Height: 300
showFilterEditor: true ( this adds a filter for each field, really nice and fast )
canEdit: false ( if set to true, it would allow inline editing on this grid )

6) Creating the list action

At this moment, we have a grid connected to a datasource. But the datasource needs to get data from somewhere. So we will create the list action:

public function listAction()
{
	// Disable view
	$this->_helper->viewRenderer->setNoRender( true );


	$data[] = array(
		'id' => 1,
		'name' => 'First One'
	);
	$data[] = array(
		'id' => 2,
		'name' => 'Second'
	);
	$data[] = array(
		'id' => 3,
		'name' => 'Third'
	);
	$data[] = array(
		'id' => 4,
		'name' => 'And finally the last'
	);
	
	
	$reply = array(
		'response' => array(
			'status' => 0,
			'data' => $data
		)
	);
	
	echo json_encode( $reply );
}

In this action, we create an array called $data that holds all data. As we want to make it simple, there is no database interaction.

About database
On real-world applications, you would probably be using a database. In this case, your $data array would be the array that is returned by Zend_DB_Select.

And them, we create a $reply array, using the structure that SmartClient datasources expect to receive. You can find more about this at the SCDataSource page.

Finally, we encode it with json_encode() function and echo to the browser.

7) Test it

Run the index action at your browser. You should see a SmartClient grid with the data that is created at list action.

8) Full source code

Here it is the full source code of the controller and index view used on this tutorial:

Controller

<?php

class IndexController extends Zend_Controller_Action
{
	public function indexAction()
	{
		// Show grid and datasource
	}

	public function listAction()
	{
		// Disable view
		$this->_helper->viewRenderer->setNoRender( true );
	
	
		$data[] = array(
			'id' => 1,
			'name' => 'First One'
		);
		$data[] = array(
			'id' => 2,
			'name' => 'Second'
		);
		$data[] = array(
			'id' => 3,
			'name' => 'Third'
		);
		$data[] = array(
			'id' => 4,
			'name' => 'And finally the last'
		);
		
		
		$reply = array(
			'response' => array(
				'status' => 0,
				'data' => $data
			)
		);
		
		echo json_encode( $reply );
	}
}

Index View

<?php
// Include SmartClient scripts
echo $this->ScGeneral()->includeScripts( 'js/isomorphic/' );

$this->ScDataSource()->addField( 'id' , 'Id' , true , null , null , false );
$this->ScDataSource()->addField( 'name' , 'Name' );
echo $this->ScDataSource()->create( 'datasourceID' , '/index/list' );

$options = array(
	'showFilterEditor' => true, 
	'canEdit' => false
);
echo $this->ScGrids()->create( 'gridID' , 'datasourceID' , 400 , 300 , $options );