Problem customizing jqgrid, navGrid button won't show , row fonts way too big in the grid

Question

Hello!

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">

 $(function(){ 
 $("#roomgrid").jqGrid({ 
     url:'/admin/admin-room/view', 
     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}}], 
    rowNum:5, 
    rowList:[5,8,10,20,30], 
    pager: '#paged',
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    caption: 'Manage Rooms'});
 });
$("#roomgrid").jqGrid('navGrid','#paged', {view: true,del:true}); 

</script>

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

on the server side i have this:

public function preDispatch(){
    $this->_helper->viewRenderer->setNoRender();
    $this->_helper->layout()->disableLayout();
}
public function viewAction() {

    $filters = array(
    'page'=>array('HtmlEntities','StringTrim'),
    'rows'=>array('HtmlEntities','StringTrim'),
    'sidx'=>array('HtmlEntities','StringTrim'),
    'sord'=>array('HtmlEntities','StringTrim'));

    $validators = array(
    'page'=>array('NotEmpty','Int'),
    'rows'=>array('NotEmpty','Int'),
    'sord'=>array('NotEmpty'));

    $input = new Zend_Filter_Input($filters,$validators);
    $input->setData($this->getRequest()->getParams());
    if($this->getRequest()){
        if($input->isValid()){

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

            $input->rows);
            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;
            break;
        case 'jqgrid' :
            return $this->formatJqgridRoom($result, $page,$totalpages, $totalrecord);
            break;
    }
}

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

\css
  \redmond
    \images
    jquery-ui-1.8.5.custom.css
 ui.jqgrid.css
 layout.css

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.

Answer 1

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

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

into the query

$(function(){})

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