jquery – Problem customizing jqgrid, navGrid button won’t show , row fonts way too big in the grid – Education Career Blog

I’ve manage to get jqGrid 3.8 working in my project(Zend Framework) using json.While basic fetching of data works i failed to see why i can’t see the buttons showed on the navigation panel. here is what i’ve done on client side:

<script type="text/javascript">

     datatype: "json",
     autowidth: true, 
     colNames:'Room ID','Room Number','Room Type','Image', 'Price','Facilities', 
     colModel: {name:'id',index:'id', width:55,editable:false,hidden:true,editoptions:{readonly:true,size:10}}, 
                {name:'room_number',index:'room_number', width:55,editable:false,editoptions:{readonly:true,size:10}}, 
                {name:'name',index:'name', width:80,editable:true,editoptions:{size:10}},  
                {name:'pic_url',index:'pic_url', width:90,editable:true,editoptions:{size:25}}, 
                {name:'price',index:'price', width:60, align:"right",editable:true,editoptions:{size:10}}, 
                {name:'facilities',index:'facilities', width:60, editable:true,editoptions:{size:10}}, 
    pager: '#paged',
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    caption: 'Manage Rooms'});
$("#roomgrid").jqGrid('navGrid','#paged', {view: true,del:true}); 


<table id="roomgrid"></table>
<div id="paged"></div>

on the server side i have this:

public function preDispatch(){
public function viewAction() {

    $filters = array(

    $validators = array(

    $input = new Zend_Filter_Input($filters,$validators);

            $this->response->page = $input->page;

            echo $this->getRooms('jqgrid', $input->page, $input->rows);


public function getRooms($switch, $page, $rows){
    $q = Doctrine_Query::create()->select("r.id,r.room_number,t.name,r.pic_url, r.price, r.facilities")
    ->from("Hotel_Model_Room r")
    ->leftJoin("r.RoomType t");

    $pager = new Doctrine_Pager($q,$page, $rows);
    $result = $pager->execute(array(), Doctrine_Core::HYDRATE_ARRAY);
    $totalpages = $pager->getLastPage();
    $totalrecord = Doctrine_Core::getTable("Hotel_Model_Room")->count();

    switch ($switch){
        case 'array':
            return $result;
        case 'jqgrid' :
            return $this->formatJqgridRoom($result, $page,$totalpages, $totalrecord);

public function formatJqgridRoom($resultset, $page='1', $totalpages, $count){

    $rows= array();

    $response->page = $page;
    $response->total = $totalpages;
    $response->records = $count;

    foreach ($resultset as $key => $value){
        $response->rows$key'id' = $value'id' ;
        $response->rows$key'cell' = array($value'id',     $value'room_number',$value'RoomType''name', $value'pic_url', $value'price',$value'facilities') ;

        return json_encode($response);


I’m using jquery ui redmond theme, i made sure jqGrid is using it, when css include is commented out ,the grid is not blue anymore.I’ve also tried to reference the css itself using imagepath option and it didn’t make any difference. there is the css folder structure


Another problem is that i can’t find where row fonts css are picked from.they are a little too big here.I believe i downloaded it straight from jqueryui site so i’m little confuse now.There is obviously something i’m doing wrong and up to now i can’t find it.So i’m a little confused about that.

thanks for reading this.


Fixed it.i forgot i had to put the pager definition

$("#roomgrid").jqGrid('navGrid','#paged', {view: true,del:true}); 

into the query


as you can the navGrid function was defined ouside it. reason why it wasn’t showing.thanks.
i hope this helped someone

Leave a Comment