Integrate Flexigrid using CakePHP

Create a component

i.e FlexigridComponent

code :

class FlexigridComponent extends Component
{
var $name = ‘FlexigridComponent’;

function create($options)
{
if (!isset($options['sortby']))
$options['sortby'] = ‘id’;
if (!isset($options['sortorder']))
$options['sortorder'] = ‘asc’;
$flexigrid =
“$(document).ready(function()
{
$(\”#”.$options['id'].”\”).flexigrid
(
{
url: ‘”.$options['url'].”‘,
dataType: ‘json’,
method: ‘POST’,
colModel : [";
foreach ($options['columns'] as $column)
{
$flexigrid .= “{display: ‘”.$column['display'].”‘, name : ‘”.$column['name'].”‘, width : ‘”.$column['width'].”‘, sortable : “.$column['sortable'].”, align: ‘”.$column['align'].”‘”;
if(isset($column['hide']))
$flexigrid .= “, hide: ‘”.$column['hide'].”‘”;
$flexigrid .= “},”;
}
$flexigrid = substr($flexigrid, 0, -1);
$flexigrid .= “],
buttons : [";

foreach ($options['buttons'] as $button)
{
if ($button['name'] == ‘separator’)
$flexigrid .= “{separator: true},”;
else
{
$flexigrid .= “{name: ‘”.$button['name'].”‘, bclass: ‘”.$button['cssclass'].”‘”;
if(isset($button['onpress']))
$flexigrid .= “, onpress : “.$button['onpress'];
$flexigrid .= “},”;
}
}
$flexigrid = substr($flexigrid, 0, -1);

$flexigrid .= ”
],”;

if(isset($options['searchitems']))
{
$flexigrid .= “searchitems : [";
foreach ($options['searchitems'] as $searchitem)
{
$flexigrid .= “{display: ‘”.$searchitem['display'].”‘, name : ‘”.$searchitem['name'].”‘},”;
}
$flexigrid .= “    ],”;
}
$flexigrid .= ”
sortname: \”".$options['sortby'].”\”,
sortorder: \”".$options['sortorder'].”\”,
usepager: “.$options['usepager'].”,
showToggleBtn: false,
useRp: true,
rp: “.$options['rp'].”,
resizable: “.$options['resizable'].”,
showTableToggleBtn: false,
width: ‘auto’,
height: “.$options['height'].”,
showCheckbox: “.$options['showCheckbox'].”
}
);

});
flexcolumns = ‘”;

foreach ($options['columns'] as $column)
$flexigrid .= $column['name'].’, ‘;

$flexigrid = substr($flexigrid, 0, -2);
$flexigrid .= “‘;”;
return $flexigrid;
}
}

 

Now inherit component in your controller

and write below code in it function of controller for which you want to display flexigrid

code:

$this->set(‘flexigrid’,$this->Flexigrid->create(array(‘id’ => ‘<DIV>’,
‘title’ => ‘<TITLE>’,
‘url’ => ‘<URL>’,
‘width’ => ‘auto’,
‘height’ => ’346′,
‘showCheckbox’ => “false”,
‘usepager’ => ‘true’,
‘rp’ => 10,
‘resizable’=>’true’,
‘columns’ => array(array(‘display’ => ‘Field1′,
‘name’    => ‘Field1′,
‘width’   => ’30′,
‘sortable’ => ‘false’,
‘align’    => ‘left’),
array(‘display’ => ‘Field2′,
‘name’    => ‘Field2′,
‘width’   => ’300′,
‘sortable’ => ‘false’,
‘align’    => ‘left’),
array(‘display’ => ‘Field3′,
‘name’    => ‘Field3′,
‘width’   => ’10′,
‘sortable’ => ‘false’,
‘align’    => ‘left’,
‘hide’    => true),
array(‘display’ => ‘Field4′,
‘name’    => ‘Field4′,
‘width’   => ’100′,
‘sortable’ => ‘false’,
‘align’    => ‘left’),
array(‘display’ => ‘Field5′,
‘name’    => ‘Field5′,
‘width’   => ’75′,
‘sortable’ => ‘false’,
‘align’    => ‘left’),
array(‘display’ => ‘Field6′,
‘name’    => ‘Field6′,
‘width’   => ’200′,
‘sortable’ => ‘false’,
‘align’    => ‘left’),
array(‘display’ => ‘Field7′,
‘name’    => ‘Field7′,
‘width’   => ’200′,
‘sortable’ => ‘false’,
‘align’    => ‘left’)),
‘buttons’ => array(array(‘name’ => ‘Edit’,
‘cssclass’    => ‘edit’
),
array(‘name’ => ‘Delete’,
‘cssclass’    => ‘delete’,
‘onpress’   => ‘doDelete’),
array(‘name’ => ‘Add’,
‘cssclass’    => ‘add’,
‘onpress’   => ‘doAdd’),
array(‘name’ => ‘separator’))
)));

 

 

After it add below code in your ctp file

code:

<?php echo $flexigrid; ?>

<div id=”<DIV>”></div>

 

Thats all.

Your flexigrid is ready. Besure your url return data in JSON  or change data type from component.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>