Data Gird used to create a presentation for data.

grid_1

grid2

It can display in Tabular or Form view. Here are some steps to create a data grid

Initialize:

$Grid = App::Module('DataGrid');

This is first instance of Data Grid created in $Gird variable.

Grid Type:

Display type can set like below.

Form Listing:
$Grid->setDisplay('FormListing')

Tabular Listing
$Grid->setDisplay('TabularListing')

Header Footer:

Header footer used for Tabular Listing only.

Header:
$Grid->setHeader(
array('Col Head 1','Col Head 2','Col Head 3', ... ,'Col Head N')
);

For example:
$Grid->setHeader(
array('#','Author', 'Comments', 'Post','Status','Options')
);

Footer
In same way we can set footer. A footer can take Array or String value to display at the bottom of the Grid. Like

$Grid->setFooter('This is my footer');

Most commonly we set Pagination data in footer like below:

// This variable we get form Paging() function in Model or InformaitonSet
$Grid->setFooter($comments['paging_str']);

Clear data:
If we use two data grid in same page then previously initialized data carry forward in new grid. Clear() method used to reset those values.

We call it beforeinitialization:

$Grid->clear()

Set Body

addRow is a method that used to create new row in the data grid.

From View:
For Form View we always set two entry Title and Value. Like:

$Grid->addRow('Name','Jhon Regan')

We also can set Html elements like:

$Grid->addRow(
    'Name',
    App::Html()->inputTag(
        "data[BlogComment][name]",
        '',
        array(
            "id"=>"f_name",
            "class"=>"check_notempty"
        )
    )
)

Tabular View:
We set multiple entry for a tabular view. Like

$Grid->addRow('Cell 1','Cell 2','Cell 3' ... 'Cell N')

For example:
$Grid->addRow('Jhon Ragan','jhon@example.com','29','$5000')

Render

After all these initialization we call render function to display the data grid. Like

$this->Render()

Delete Buttons

We can delete row for Model and InformationSet,CategorySet,Model. The operation execute by AjAX. All these functions are available in Grid Row Addons.

Delete Model Data
Link Format: <a href="#" class="link_delete" title="[MODEL]_[id]">Delete</a>

Example 1: <a href="#" class="link_delete" title="Order_5">Delete</a>
Example 2:

App::load("Helper/Html")

->linkTag(

"javascript:void(0)",

App::load("Helper/Html")

->imgTag(

$this->baseurl('/images/admin/remove.gif'),

NULL,

array('title'=>'Delete','alt'=>'Delete')

array('id'=>"Order_{$val['id']}",'class'=>'link_delete icon', 'title'=>'Order_' . $val['id'])

)

Delete InformationSet Data
Link Format: <a href="javascript:void(0)" class="deleteinformatonset" title="[InformationSet Name],[InformationSetID]" >Delete</a>

Example 1: <a href="javascript:void(0)" class="deleteinformatonset" title="product,5" >Delete</a>

Example 1: <a href="javascript:void(0)" class="deleteinformatonset" title="'. $type . ',' . $val['id'] . '" >Delete</a>

Delete Batch Data
We can delete a batch of data and check/uncheck check box in each row. Here are the below steps to create batch delete operation.

1.Create a top check box to select/deselect all check box it the page. We can create it by a CSS class "checkall" in a Checkbox. Generatly we create this check box in header of the the Data Grid. See below example:
<input type="checkbox" id="checkall" />
Or $this->get_tag('input',array('type'=>'checkbox','id'=>'checkall','class'=>"checkall"))

2.Create Check box for each row with CSS class "checkrow".We create it in first column of DataGrid See below example
<input type="checkbox" value="5" class="checkrow" />
or $this->get_tag('input',array('type'=>'checkbox','value'=>"{$comment['id']}","class"=>"checkrow"))

3.Create delete button in Tool Bar.
For model : setBtnDelete(Array("id"=>"{'mode':'Comment'}"))
For InformationSet : setBtnDelete(array("id"=>"{'mode':'informationset,product'}")) // Product is InformationSet Type

Grid Example:
Generally we pass it in a foreach loop to display data.

$Grid = App::Module('DataGrid');
$Grid->setHeader(array($this->get_tag('input',array('type'=>'checkbox','id'=>'checkall','class'=>"checkall")),'#','Author', 'Comments', 'Post','Status'));
$Grid->setFooter($comments['paging_str']);
foreach($comments['data'] as $key => $comment)
{
$Grid->addRow(
$this->get_tag('input',array('type'=>'checkbox','value'=>"{$comment['id']}","class"=>"checkrow")),
(($comments["page"] - 1) * App::Helper('Config')->siteInfo('default_pagination') + $key + 1),
$comment['name'],
$comment['comment'],
App::InformationSet('blogpost')->idToName($comment['postid'],'title','Yes',Array('')),
$comment['status']
);
}
$Grid->Render();

Example 2:
Display a form view with HTML element

App::Module('DataGrid')
    ->setDisplay('FormListing')
    ->addRow('Name',App::load("Helper/Html")->inputTag("data[BlogComment][name]",$comment['name'],array("id"=>"f_name","class"=>"app_input check_notempty")) )
    ->addRow('Email Address',App::load("Helper/Html")->inputTag("data[BlogComment][email]",$comment['email'],array("id"=>"f_name","class"=>"app_input check_notempty")) )
    ->addRow('Post',App::InformationSet('blogpost')->idToName($comment['postid'],'title','Yes',Array('')))
    ->addRow('Comments',App::load("Helper/Html")->textareaTag("data[BlogComment][comment]",$comment['comment'],array("class"=>"app_input check_notempty richtexteditor")) )
    ->addRow('Website',App::load("Helper/Html")->inputTag("data[BlogComment][website]",$comment['website'],array("class"=>"app_input")) )
    ->addRow('Submit On',App::load("Helper/Html")->dateTimeTag("data[BlogComment][dated]",$comment['dated']) )
    ->addRow('Status',App::load("Helper/Html")->selectTag("data[BlogComment][status]",array("Active"=>"Active","Inactive"=>"Inactive",),$comment['status']))
    ->Render();