jqGrid not display properly

Question

I am using jQuery grid plugin , jqGrid, to show an array of data.

What I want to achieve is 1. by default, that grid is empty. 2. when user clicks the search button, it will use AJAX to load data 3. data will load into grid.

From the attachment, I have this error

grid width is not 100% px , it is two small
pager is not show up. how to use method to control pager ?

how to fix it ? have any samples ?

Thanks

screenshot

<h2>Search</h2>
<form id="project_search_form">
<table class="grid">
...
    <tr>        
        <td><a  class="form_button" onclick="searchProject();" href="#">search</a></td> 
    </tr>
</table>
</form>


<table id="projectList"></table> 
<div id="projectPager"></div>

<script type="text/javascript">

$(document).ready(function(){

    jQuery("#projectList").jqGrid({ 
        url:'server.php?q=2', 
        datatype: "json", 
        colNames:['ID','Name'], 
        colModel:[ {name:'projectId',index:'id', width:55} , {name:'name',index:'name', width:55}], 
        rowNum:10, 
        rowList:[10,20,30], 
        pager: '#pager5', 
        sortname: 'id', 
        viewrecords: true, 
        sortorder: "desc", 
        caption:"Simple data manipulation", 
        editurl:"someurl.php" }).navGrid("#projectPager",{edit:false,add:false,del:false}); 
});

function searchProject(){
    var param =  $('#project_search_form').serialize();
     BaseAjaxUtil.object_search(param, 
              {
                 callback:function(data){                        
                     var jsongridRows = eval("("+data+")");

                     for(var i = 0; i < jsongridRows.length; i++) {
                        var datarow = jsongridRows[i];      
                        var su=jQuery("#projectList").jqGrid('addRowData',i+1, datarow); 
                        // if(su) alert("Succes. Write custom code to add data in server"); else alert("Can not update");
                     }

                 },
                 errorHandler:function(errorString) { alert("error:"+errorString); }            
                }
              );        
}
</script>

Note: You reference the ID #pager5 as the element that will contain the pager, but your HTML markup does not contain an element with ID #pager5. Also there are many examples here trirand.com/blog/jqgrid/jqgrid.html — John Hartsock

Justin Ethier Justin Ethier · Accepted Answer · 2012-05-01T14:10:12

You can use the autowidth: true option to control width. From the jqGrid docs:

When set to true, the grid width is recalculated automatically to the width of the parent element. This is done only initially when the grid is created. In order to resize the grid when the parent element changes width you should apply custom code and use the setGridWidth method for this purpose

Then you just need to make sure that your parent element is of the appropriate width.

jqGrid not display properly

1 Answers