How do I implement jqgrid v3.7 in my webapplication created using cakephp 1.3

Question

I am trying to implement jqgrid v3.7 in my webapplication created using cakephp v1.3.

My controller code is as follows

function admin_index()
{
    // get how many rows we want to have into the grid - rowNum parameter in the grid
    $limit = $this->params['url']['rows'];

    // get index row - i.e. user click to sort. At first time sortname parameter -
    // after that the index from colModel
    $sidx = $this->params['url']['sidx'];

    // sorting order - at first time sortorder
    $sord = $this->params['url']['sord'];

    // if we not pass at first time index use the first column for the index or what you want
    if( !$sidx ) $sidx = 1;

    // calculate the number of rows for the query. We need this for paging the result
    $row = $this->Constituency->find('count');
    $count = $row;

    // calculate the total pages for the query
    if( $count > 0 )
    {
        $total_pages = ceil($count / $limit);
    }
    else
    {
        $total_pages = 0;
    }

    // if for some reasons the requested page is greater than the total
    // set the requested page to total page
    if( $page > $total_pages ) $page = $total_pages;

    // calculate the starting position of the rows
    $start = $limit * $page - $limit;

    // if for some reasons start position is negative set it to 0
    // typical case is that the user type 0 for the requested page
    if( $start < 0 ) $start = 0;

    // the actual query for the grid data
    $limit_range = $start . "," . $limit;
    $sort_range = $sidx . " " . $sord;
    //$result = $this->Constituency->findAll(null, "id,name", $sort_range, $limit_range, 1, null);
    $this->Constituency->recursive = -1;
    $result = $this->Constituency->find('all', array(
        'fields' => array('id', 'name'),
        'order' => $sidx,
        'limit' => $start .",". $limit_range
    ));

    $i=0;
    $response->page = $page;
    $response->total = $total_pages;
    $response->records = $count;

    foreach($result as $result)
    {
        $response->rows[$i]['id'] = $result['Constituency']['id'];
        $responce->rows[$i]['cell']=array($result['Constituency']['id'],$result['Constituency']['name']);
        $i++;
    }

    echo json_encode($response);
}

the view file contains the following code

$this->Html->css('ui.jqgrid');
$this->Html->script('jquery.jqGrid.min');

<script type="text/javascript">
    $(document).ready(function(){
        $("#list").jqGrid(
        {
            url:'<?php echo $this->Html->url(array("controller" => "constituencies", "action" => "index")); ?>',
            datatype: "json",
            colNames:['Id','Name'],
            colModel:[
                {name:'id',index:'id', width:55},
                {name:'name',index:'name', width:90},
            ],
            rowNum:10,
            rowList:[10,20,30],
            pager: jQuery('#pager'),
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption:"Constituencies"
        });
        $("#list").navGrid("#pager",{edit:false,add:false,del:false});
    })
</script>

<div class="constituencies index">
    <h2><?php __('Constituencies'); ?></h2>
    <table id="list"  class="scroll"></table>
    <div id="pager"  class="scroll" ></div>
</div>

Now when I load the index action I get a lot of errors

Undefined index: rows Undefined index: sidx Undefined index: sord etc. etc.

Has anybody included jqgrid in a cakephp based application ?

How do I include the jqgrid in my application ? Please help me do this.

Thanks

Answer 1

I don't use cakephp myself, but probably two links http://www.trirand.com/blog/?page_id=393/help/integration-of-cakephp-and-jqgrid-tutorial/ and http://www.trirand.com/blog/?page_id=393/help/how-to-integrate-jqgrid-with-cakephp/ can be helpful for you.

Answer 2

The errors you're getting look like PHP errors. Try putting a debug($this->params); statement at the top of your view file to see what the controller is spitting out.

Answer 3

There was some incorrect values assigned in the find function for constituency model.

here is the correct complete working code:


THIS IS THE CONTROLLER CODE:

1.) Leave the function in which the grid is shown a blank like this

function index()
{

}

2.) Then create a new function for showing the grid with data like this :

function admin_showGrid()
{
    $this->autoRender = false;

    // get how many rows we want to have into the grid - rowNum parameter in the grid
    $limit = $this->params['url']['rows'];

    // get index row - i.e. user click to sort. At first time sortname parameter -
    // after that the index from colModel
    $sidx = $this->params['url']['sidx'];

    // sorting order - at first time sortorder
    $sord = $this->params['url']['sord'];

    $page = $this->params['url']['page'];

    // if we not pass at first time index use the first column for the index or what you want
    if( !$sidx ) $sidx = 1;

    // calculate the number of rows for the query. We need this for paging the result
    $row = $this->{Model_Name}->find('count');
    $count = $row;

    // calculate the total pages for the query
    if( $count > 0 )
    {
        $total_pages = ceil($count / $limit);
    }
    else
    {
        $total_pages = 0;
    }

    // if for some reasons the requested page is greater than the total
    // set the requested page to total page
    if( $page > $total_pages ) $page = $total_pages;

    // calculate the starting position of the rows
    $start = $limit * $page - $limit;

    // if for some reasons start position is negative set it to 0
    // typical case is that the user type 0 for the requested page
    if( $start < 0 ) $start = 0;

    // the actual query for the grid data
    $limit_range = $start . "," . $limit;
    $sort_range = $sidx . " " . $sord;
    //$result = $this->{Model_Name}->findAll(null, "id,name", $sort_range, $limit_range, 1, null);
    $this->{Model_Name}->recursive = -1;
    $result = $this->{Model_Name}->find('all', array(
        'fields' => array('id', 'name'),
        'order' => $sort_range,
        'limit' => $limit_range
    ));

    $i = 0;
    $response->page = $page;
    $response->total = $total_pages;
    $response->records = $count;

    foreach($result as $result)
    {
        $response->rows[$i]['id'] = $result['{Model_Name}']['id'];
        $response->rows[$i]['cell'] = array($result['{Model_Name}']['id'], $result['{Model_Name}']['name']);
        $i++;
    }

    echo json_encode($response);

    //writing exit() is necessary.
    exit();
}

THIS IS THE VIEW CODE:

1.) include the necessary files

echo $this->Html->css('ui.jqgrid');

echo $this->Html->script('grid.locale-en');
echo $this->Html->script('jquery.jqGrid.min');

2.) add the following javascript code in your VIEW file

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#list").jqGrid(
    /* '#list' is the ID of the table in which you want populated results */
    {
        url:'<?php echo $this->Html->url(array("controller" => "{Controller_Name}", "action" => "{Action_Name}")); ?>',
        datatype: "json",
        mtype: "GET",
        colNames:['Id','Name'],
        colModel:[
            {name:'id',index:'id', width:55},
            {name:'name',index:'name', width:90},
        ],
        rowNum:10,
        rowList:[10,20,30],
        pager: jQuery('#pager'), /* id of the pagination element */
        sortname: 'id',
        viewrecords: true,
        sortorder: "asc",
        caption:"Enter table Heading or the name you want to show for the table",
        height:"auto",
        autowidth: true
    });
    jQuery("#list").navGrid("#pager",{edit:false,add:false,del:false});
})
</script>

3.) And finally the HTML in the same view file

<table id="list" style="height:auto;"></table>
<div id="pager"></div>

If you still face any problems with the code above let me know.