Dojo Grid Scaffolding

One of the big timesavers is an implementation of Dojo Grid for scaffolding. Once you establish an action implementing a JSON data store (or a cached JSON file) you can expose a dynamic sortable grid on a page with custom buttons, controls and even in-place editing.

Dojo grids also allow for "Just in time" data loading; as you scroll, it will load data from a larger dataset to allow you to virtually scroll through a HUGE dataset.

Warning: Dojo is a bit slow to load - even with layers - and its probably better at this point for admin scaffolding than for high volume client facing work. This slowness is NOT related to the size of the dataset being scrolled for low/medium sized (c. 0 - 2,000 records) datasets; its just the load time of the actual Dojo code classes itself. (Note: firebug will SERIOUSLY INCREASE the load times for Dojo!)

That being said, Dojo grids are a pretty fast way to create lists in Zupal. Here's a sample from the Atom (node) listing in the Administration area:

Configuration File

[columns]

r.idf.field = "id"
r.idf.name = "ID"
r.idf.width = "7em"

r2.atomic_id.field = "atomic_id"
r2.atomic_id.name = "AID"
r2.atomic_id.width = "7em"

; ------------- COLUMN 2 -----------------

r.title.field = "title"
r.title.name = "Title"
r.title.width = "10em"

r2.lead.field = "lead"
r2.lead.name = "Lead"
r2.lead.width = "10em"

; ---------------- COLUMN 3 ----------------

r.mc.field = "model_class"
r.mc.name = "Class"
r.mc.width = "16em"

r2.mid.field = "parent_id"
r2.mid.name  = "Class ID"
r2.mid.width  = "16em"

; ------------------ COLUMN 4 -------------------

r.edit.field = "id"
r.edit.name  = " "
r.edit.width = "40px"
r.edit.formatter = "atom_grid_edit_formatter"

r2.view.field = "id"
r2.view.name  = " "
r2.view.width = "40px"
r2.view.formatter = "atom_grid_view_formatter"

; ------------------ COLUMN 5 -------------------

r.delete.field = "id"
r.delete.name  = " "
r.delete.width = "30px"
r.delete.formatter = "atom_grid_delete_formatter"

r2.sp2.name = " "

Screen Shot

Note - the basic "crud" icons are part of the core image set. The actual look and feel of the grid is augmented by style sheet directives in the active layout's CSS but can be overwritten for specific grids as needed. This particular grid demonstrates that you can if you wish use multiple rows per data item.

The PHP

The Grid is rendered using a view helper; Javascript hooks for click response are embedded in the page head using Zend_View buffering.

<?

$this->placeholder('atom_title')->set('Atoms');

$this->headScript()->captureStart()
?>
function atom_grid_edit_formatter(id)
{
    return '<a href="/administer/index/atoms/edit/id/' + id + '"><img src="/images/icons/edit.gif" border="0" width="20" height="20"></a>';
}

function atom_grid_delete_formatter(id)
{
    return '<a href="/administer/index/atoms/delete/id/' + id + '"><img src="/images/icons/x.gif" border="0" width="20" height="20"></a>';
}
function atom_grid_view_formatter(id)
{
    return '<a href="/atom/' + id + '"><img src="/images/icons/view.gif" border="0" width="20" height="20"></a>';
}

<? $this->headScript()->captureEnd(); ?>

<?
echo $this->dojostore('atom_store', $this->baseUrl() . '/administer/index/atomsstore');

echo $this->dojogrid('atom_grid', 'atom_store'
    , new Zend_Config_Ini(dirname(__FILE__) . '/atom_grid.ini', 'columns'), 'id', NULL,
    array('width' => 700, 'height' => 400));