Basic Grid Example

Grid presents data in a tabular way. Grid always has a defined set of columns. When used with model, columns will be automatically populated. Without Models you need to use addColumn() and populate data

SOURCE

$grid=$page->add('Grid');
$grid->addColumn('name');
$grid->addColumn('surname');

$grid->setSource(array(
  array('name'=>'John','surname'=>'Smith'.rand(1,20)),
  array('name'=>'Peter','surname'=>'Tester'.rand(20,40))
));

  
Demo
Name Surname
John Smith12
Peter Tester31

Grid Buttons

Grid has support for buttons. addButton() is merely a wrapper out of convenience. You can add button into any view.

SOURCE

$grid=$page->add('Grid');

$grid->addColumn('name');
$grid->addColumn('surname');

$grid->setSource(array(
  array('name'=>'John','surname'=>'Smith'.rand(1,20)),
  array('name'=>'Peter','surname'=>'Tester'.rand(20,40))
));

$grid->addButton('One');
$grid->addButton('Two')->js('click')->univ()->alert('clicked button two');
$grid->addButton('Reload Grid')->js('click',$grid->js()->reload());
$grid->addButton('With Icon')->setIcon('heart');

  
Demo
Name Surname
John Smith11
Peter Tester34

Grid from Model

The most typical use is when grid is being populated through a Model.

SOURCE

$grid=$page->add('Grid');
$grid->setModel('Employee');
$grid->addPaginator(20);

  
Demo
Name Salary
sawwjwnspp 9,999.00
ggg 0.00
,medited Peter and value changed to 77 kya baat kya baat kya baat 7,000.00
Peter Smith 1,212.00
Peter Michael 20,000.00
Manuel 500.00
Great it really works, yeah 210.00
aaa 32.00
Some name 22.00
... this was blanc ... 3.00
2,132.00
dd 44.00
rrr 444.00
0.00
hfgh 0.00
dsadsa 0.00
sadsadas 0.00
sadsadas 0.00
0.00
aaa 0.00
< 12345 ... 78 >

Paginator and Quicksearch

The most typical use is when grid is being populated through a Model.

SOURCE

$grid=$page->add('Grid');

$grid->setModel('Employee');
$grid->addPaginator(3);
$grid->addQuickSearch(array('name'));

  
Demo
Name Salary
sawwjwnspp 9,999.00
ggg 0.00
,medited Peter and value changed to 77 kya baat kya baat kya baat 7,000.00
< 12345 ... 518 >

Adding Popup buttons

You can add a custom field which resembles a button and assign action to it with Grid:

SOURCE

$grid=$page->add('Grid');
$grid->setModel('Employee');
$grid->model->_dsql()->limit(5);
$grid->addColumn('button','details');

if($_GET['details']){
	// this generates javascript to be executed on buttion click
	$grid->js()->univ()
		->frameURL('Details Title',$page->api->url(null,array('keyword'=>123,'id'=>$_GET['details'])))
		->execute();
}

if($_GET['keyword']){

	// If you are expecting furter queries from below, make sure to make arguments sticky
	$page->api->stickyGET('keyword');
	$page->api->stickyGET('id');

	$form=$page->add('Form');
	$form->setModel('Employee')->loadData($_GET['id']);
	$form->js(true)->find('input')->attr('disabled',true);

	// Enforce rendering only of this object
	$_GET['cut_object']=$form->name;
}

  
Demo
Name Salary Details
sawwjwnspp 9,999.00
ggg 0.00
,medited Peter and value changed to 77 kya baat kya baat kya baat 7,000.00
Peter Smith 1,212.00
Peter Michael 20,000.00

The button in Agile Toolkit Grid automatically binds a call-back which passes in the ID value. When you retrieve that request, you can send any javascript to the front page instructing it to either re-load the grid, open a popup or go to a different page. The action can be even decided on the record basis, such as some records can be automatically deleted and grid reloaded, other records may display a confirmation window.

You may wonder how to avoid this extra request if you do know what's needed. In this case you need to put a bit of your own javascript on a button-shaped column.

SOURCE

$grid=$page->add('Grid');
$grid->setModel('Employee');
$grid->model->_dsql()->limit(5);
$grid->addColumn('template','details')->setTemplate('<button type="button" class="mybutton">ClickMe</button>');
$grid->columns['details']['thparam'].=' style="width: 40px; text-align: center"';

$grid->js(true)->_selector('#'.$grid->name.' .mybutton')
	->button();
$grid->js('click')->_selector('#'.$grid->name.' .mybutton')
	->univ()
	->dialogOK('Yey','Some custom javascript action here');

  
Demo
Name Salary Details
sawwjwnspp 9,999.00
ggg 0.00
,medited Peter and value changed to 77 kya baat kya baat kya baat 7,000.00
Peter Smith 1,212.00
Peter Michael 20,000.00

Grid support for Addons

Addon allows to build extensions for Grid columns. This extension demonstrates how to create a new column type which would open a pop-up window to a new page. If you wish to use this addon, please place the code inside atk4-addons/grid/lib/Grid/Format/popup.php (case sensitive):

SOURCE

namespace grid;
class Controller_Grid_Format_popup extends \AbstractController {
	public $label, $descr, $page;
	function initField($field, $description){
		$grid=$this->owner;
		$this->label=$this->descr=$description;
		$this->page='./'.$field;
		$grid->js(true)->_selector('#'.$grid->name.' .button_'.$field)
			->button();

		$grid->js('click')->_selector('#'.$grid->name.' .button_'.$field)
			->univ()
			->frameURL($description,array($this->api->url($this->page),
				$grid->model->id_field=>$grid->js()
					->_selectorThis()
					->closest('tr')
					->attr('data-id')));


		$grid->columns[$field]['thparam'].=' style="width: 40px; text-align: center"';
	}
	function formatField($field){
		$grid=$this->owner;
		$grid->current_row_html[$field]='<button type="button" class="button_'.$field.'">'.$this->label.'</button>';
	}
}

$grid=$page->add('Grid');
$grid->setModel('Employee');
$grid->model->_dsql()->limit(5);
$grid->addColumn('grid/popup','details');
$grid->addColumn('grid/popup','test');


  
Demo
Name Salary Details Test
sawwjwnspp 9,999.00
ggg 0.00
,medited Peter and value changed to 77 kya baat kya baat kya baat 7,000.00
Peter Smith 1,212.00
Peter Michael 20,000.00