jQuery Grid Plugin - jqGridForum

15/05/2009
07:27

Darkvador

Member

Members

Forum Posts: 3

Member Since:
14/05/2009

Offline

1

Hello

Am a jquery lover. I have set up jqgrid in zend.

The layout of the grid is displaying but am unable to displaying my data in the grid.

Can someone help me please in making my data from my controller to be displayed in my view

/persons/index.phtml

Thanks you for a fast feedback.

===============================

This is grid.js

===============================

jQuery(document).ready(function(){

jQuery("#list").jqGrid({

    url:'Persons.php?nd='+new Date().getTime(),
    datatype: 'json',
    mtype: 'GET',

    colNames:['ID','Name', 'Surname'],
    colModel :[
      {name:'id', index:'id',width:20},
      {name:'name', index:'name},
      {name:'surname', index:'surname', align:'right'},

    pager: jQuery('#pager'),
    rowNum:5,
    rowList:[5,10,15],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    imgpath: '/styles/themes/basic/images',
    caption: 'Detail grid'
});
});

===============================

This is in my view index.phtml

===============================

$this->headLink()->appendStylesheet('/styles/themes/basic/grid.css');

$this->headScript()->appendFile('/scripts/jquery.jqGrid.js');
$this->headScript()->appendFile('/scripts/js/jqModal.js');
$this->headScript()->appendFile('/scripts/js/jqDnR.js');
$this->headScript()->appendFile('/scripts/grid.js');

?>

/table>
<div id="pager" class="scroll" style="text-align:center;"></div>

=======================================

In my controller named Persons , action Index I have

Get data from database

$tablePersons = new Db_Test_Persons_Table ( );
$result = $tablePersons->select ();

=======================================

Thank you for your help

20/05/2009
10:45

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Hello,

Sorry, but newer work with Zend framework. Maybe there are other users that can help. Anybody?

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

06/07/2009
17:23

Deaddancer

Member

Members

Forum Posts: 3

Member Since:
06/07/2009

Offline

3

I'm also working on implementing jqGrid in Zend Framework. I see your definition of the jqGrid in your .js file, but I don't see where you actually send the data to the grid. Your $result table needs to be converted to json for your grid to work.

I'm also in the process of getting the json type grid to work, having successfully created a grid using a locally defined array in my javascript. Once I figure that out I will be happy to share what I discover.

04/09/2009
06:54

brendan

Guest

Guests

4

ive used this on a magento project, here is the code..

Basically i call the table and use the local data type and loop through the array of records.

<?php $skinUrl = $this->getSkinUrl('') ?>

<?php $collection = Mage::getResourceModel('installers/installers_collection');
$collection->addFilter('contact_status','1');
$collection->load(); ?>

<div class="page-head">
<h3><?php echo $this->__('Installation Service Provider Litsing') ?></h3>
</div>
<p>
Below is a list of installers available.<br/>
</p>

    var mydata = [
    <?php foreach ($collection->getItems() as $item) { ?>
            <?php $contacttype = $item->getData('contact_type');?>
            <?php $companyname = $item->getData('company_name');?>
            <?php $companypostcode = $item->getData('company_postcode');?>
            <?php $companycity = $item->getData('company_city');?>
            <?php $companystate = $item->getData('company_state');?>
            <?php $contactname = $item->getData('contact_name');?>
            <?php $contactphone = $item->getData('contact_phone');?>

            <?php echo "{contact_type:".chr(34).$contacttype.chr(34).",company_name:".chr(34).$companyname.chr(34).",company_postcode:".chr(34).$companypostcode.chr(34).",company_city:".chr(34).$companycity.chr(34).",company_state:".chr(34).$companystate.chr(34).",contact_name:".chr(34).$contactname.chr(34).",contact_phone:".chr(34).$contactphone.chr(34)."},"; ?>
    <?php } ?>
            ];
    for(var i=0;i<=mydata.length;i++)
    jQuery("#list4").addRowData(i+1,mydata[i]);});
</script>

hth

brendan

15/09/2009
03:59

pritisolanki

India

Member

Members

Forum Posts: 7

Member Since:
15/09/2009

Offline

5

my issue was solved.I followed - http://www.trirand.com/jqgridw.....to_install

http://pritisolanki.wordpress.com

16/09/2009
02:12

emoleon

Guest

Guests

6

Hello,

I'm using jqGrid in an application based on ZendFramework like this :

In the view xxx.phtml :

});

        $(”#list”).navGrid(”#pager”,
        {view:true},
        {top:20,left:150,dataheight:200,width:400,reloadAfterSubmit:false,jqModal:false, closeOnEscape:true,bottominfo:”Fields marked with (*) are required”}, // edit options
        {top:20,left:150,dataheight:200,width:400,reloadAfterSubmit:false,jqModal:false, closeOnEscape:true,bottominfo:”Fields marked with (*) are required”}, // add options
        {top:20,left:150,reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options
        {top:20,left:150,jqModal:false,closeOnEscape:true}, // search options
        {top:20,left:150,dataheight:200,width:400,jqModal:false,closeOnEscape:true} // view options
    );
    });
    –></script>

In the controller in this case AdminController : 2 functions : one for fill the jqGrid and one for save change

    function getlistcontactAction() {
        $sidx = $this->getRequest()->getParam('sidx');
        $sord = $this->getRequest()->getParam('sord');
        $page = $this->getRequest()->getParam('page');
        $limit = $this->getRequest()->getParam('rows');

$s = new modelClass($this->db);
$count = $s->getNbrContact();

        if( $count > 0 ) {
            $total_pages = ceil($count/$limit);
        } else {
            $total_pages = 0;
        }
        if ($page > $total_pages) $page=$total_pages;

$start = $limit*$page – $limit;
if ($start<0) $start=0;

$row = $s->getListContact($sidx,$sord,$start,$limit);

        $response['page'] = $page;
        $response['total'] = $total_pages;
        $response['records'] = $count;
        $i=0;
        foreach ($row as $r) {
            $response['rows'][$i]['id']=$r->id; //id
            $response['rows'][$i]['cell']=array($r->id,$r->prenom,$r->nom,$r->tel,$r->email);
            $i++;
        }
        $this->_helper->json($response);
    }

In a modelClass 2 function : getNbrContact and getListContact

function getListContact($idx,$ord,$start,$limit) {
        $select = $this->db->select();
        $select->from('contact')
            ->distinct();
        if ($idx!='') {
            $select->order($idx.' '.$ord);
        }
        $select->limit($limit,$start);
        $rs = $this->db->fetchAll($select);
        return $rs;
    }

    function getNbrContact() {
        $select = $this->db->select();
        $select->from('contact');
        return $select->query()->rowCount();
    }

I hope this exemple help you !

07/10/2009
04:47

xen

Guest

Guests

7

to emoleon: Thanks, it helped me very much!

04/12/2009
14:34

Nikolay Peychovski

Guest

Guests

8

emoleon said:

Post edited 10:15 – 16/09/2009 by emoleon

Hello,

I'm using jqGrid in an application based on ZendFramework like this :

In the view xxx.phtml :

<div id=”liste”>
    <table id=”list” class=”scroll” cellpadding=”0″ cellspacing=”0″></table>
    <div id=”pager” class=”scroll” style=”text-align:center;”></div>
</div>

<script type=”text/javascript”><!–
    $(document).ready(function(){
        $(”#list”).jqGrid({
            width: 900,
            height: 240,
            autowidth: true,
            rownumbers: true,
            rownumWidth: 40,
            url:'<?php echo $this->baseUrl() ?>/admin/getlistcontact',
            datatype: 'json',
            mtype: 'POST',
            colNames:['No','First name','Name','Tel','email'],
            colModel :[
                {name:'id', index:'id',
                    width:55,
                    hidden:true
                },
                {name:'prenom', index:'prenom',
                    width:50,
                    sortable:true,
                    editable:true,
                    editoptions:{size:30}
                },
                {name:'nom', index:'nom',
                    width:50,
                    sortable:true,
                    editable:true,
                    editoptions:{size:30}
                },
                {name:'tel', index:'tel',
                    width:30,
                    sortable:true,
                    editable:true,
                    editoptions:{size:20}},
                {name:'email', index:'email',
                    width:80,
                    sortable:true,
                    editable:true,
                    editoptions:{size:50}
                }
            ],
            pager: jQuery('#pager'),
            rowNum:30,
            rowList:[10,20,30],
            sortname: 'nom',
            sortorder: “asc”,
            viewrecords: true,
            viewsortcols: [true,'horizontal',true],
            gridview: false,
            hidegrid: false,
            editurl:”<?php echo $this->baseUrl() ?>/admin/savecontact”,
            caption: 'Contact list',
            forceFit : true

        });

        $(”#list”).navGrid(”#pager”,
        {view:true},
        {top:20,left:150,dataheight:200,width:400,reloadAfterSubmit:false,jqModal:false, closeOnEscape:true,bottominfo:”Fields marked with (*) are required”}, // edit options
        {top:20,left:150,dataheight:200,width:400,reloadAfterSubmit:false,jqModal:false, closeOnEscape:true,bottominfo:”Fields marked with (*) are required”}, // add options
        {top:20,left:150,reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options
        {top:20,left:150,jqModal:false,closeOnEscape:true}, // search options
        {top:20,left:150,dataheight:200,width:400,jqModal:false,closeOnEscape:true} // view options
    );
    });
    –></script>

In the controller in this case AdminController : 2 functions : one for fill the jqGrid and one for save change

    function getlistcontactAction() {
        $sidx = $this->getRequest()->getParam('sidx');
        $sord = $this->getRequest()->getParam('sord');
        $page = $this->getRequest()->getParam('page');
        $limit = $this->getRequest()->getParam('rows');

        $s = new modelClass($this->db);
        $count = $s->getNbrContact();

        if( $count > 0 ) {
            $total_pages = ceil($count/$limit);
        } else {
            $total_pages = 0;
        }
        if ($page > $total_pages) $page=$total_pages;

        $start = $limit*$page – $limit;
        if ($start<0) $start=0;

        $row = $s->getListContact($sidx,$sord,$start,$limit);

        $response['page'] = $page;
        $response['total'] = $total_pages;
        $response['records'] = $count;
        $i=0;
        foreach ($row as $r) {
            $response['rows'][$i]['id']=$r->id; //id
            $response['rows'][$i]['cell']=array($r->id,$r->prenom,$r->nom,$r->tel,$r->email);
            $i++;
        }
        $this->_helper->json($response);
    }

Hi, the post is very usefull, thank you!

I have a question. How you retrive the json string and loaded in the grid. I was trying your code, but not loaded generated json string in the grid. I think, that the connection is lost between grid in view script and generated jsonstring of controller.

What is the secret? What I wrong?

Confused