It is difficult for me to tell you what is the problem.

Could you please send me a link to the problem.

You can write me to tony at trirand dot com

Ragrads

Tony

The problem about navigation is resolved.

For the second problem, I tried your advice but nothing happens. White screen.

I rebuilt the "jqGrid" with the minimum properties:

jQuery("#list").jqGrid({
    url:'index.cfm?event=MRL_Data',
    datatype: 'json',
    colNames:['Code','Commodity', 'MRL'],
    colModel :[ {name:'COMMODITIES_CODE', index:'COMMODITIES_CODE asc', width:50, align:'center', sortable:true},
                {name:'NOM', index:'NOM', width:300, align:'left', sortable:false},
                {name:'SUB_10', index:'SUB_10', width:50, align:'center', sortable:false, editable:true, edittype:'text'}],
    pager: jQuery("#pager"),
    imgpath: '../resources/js/themes/basic/images'
}).navGrid('#pager', {edit: true, add: false, del: false,search: true});

the problem is different following the browser (Internet explorer or Firefox)

Internet Explorer:

The navigation button doesn't appear and see the error message above.

But the "edit", "add", etc. appear and function well.

Firefox:

No error, but the left navigation arrow appear OVER the "edit" button.

The right navigation arrow doesn't appear.

Thank you for your support

Best regards

Andre

jqGrid does not support client side pagnagion. The primary purpose

for the grid is server side oriented. If you look into the examples I do

not think that it is complex.

For the second issue, could you please try without using navGrid  first 

and see the result.

If all is ok - try with position left in navGrid.

Regards

Tony

For beginning, I would like to thanks for your reaction.

I have controled the code and for the first issue:

I use the class "scroll" for the two (grid & navigation bar)

<table style="background-color:#CCCCCC ">
    <tr>
        <td>
            <table id="list" class="scroll"></table>
            <div id="pager" class="scroll" style="text-align:center;"></div>
        </td>
        <td></td>
    </tr>
</table>

for the second issue: I don't understand!

If I understand your reaction:

If I configure the jqGrid to display 10 records, I must extract only 10 records from the Query???

The first 10 records if it is the first page,
from 11 to 20 for the second, etc.

It is very complex to manage that

Best regards

Andre

For the second issue - it seems that your pager does not have class scroll.

For the first one - jqGrid displays the whole data returned from the server.

Regards

Tony

I'm new with this plug in and I try to use it. But, I have 2 problems:

1° When I try to display the result of the JSON querie, whole result is displayed in once and not by pagination. I work in ColdFusion; I create a JSON file (see the example). I show the file of configuration of the "jqGrid." 

JSON file:

{ totalpages:'10', currpage:'1', totalrecords:'378', rows : [{id:'1',cell:['0100000','1. FRUIT FRESH OR FROZEN; NUTS','0']}, ... }

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#list").jqGrid({
            url:'index.cfm?event=MRL_Data',
            datatype: 'json',
            mtype: "GET",
            colNames:['Code','Commodity', 'MRL'],
            colModel :[ {name:'COMMODITIES_CODE', index:'COMMODITIES_CODE asc', width:50, align:'center', sortable:true, sorttype:'string'},
                        {name:'NOM', index:'NOM', width:300, align:'left', sortable:false, sorttype:'string'},
                        {name:'SUB_10', index:'SUB_10', width:50, align:'center', sortable:false, editable:true, sorttype:'string'}],
            toolbar: [true, "top"],
            width: 500,
            height:450,
            pager: jQuery("#pager"),
            recordtext: 'nombre de produits:',
            pgbuttons: true,
            rowNum:40,
            rowList:[40,60,100],
            imgpath: '../resources/js/themes/coffee/images',
            caption: 'MRL management',
            onSelectRow: function(id){
                if(id && id!==lastsel){
                //jQuery(’#rowed3′).restoreRow(lastsel);
                    jQuery("#list").saveRow(id);
                    jQuery("#list").editRow(id,true);
                    lastsel=id;
                }
            }
        }).navGrid('#pager', {edit: true, add: false, del: false,search: true,position:"right"});
    });
</script>

2° When the result is displayed, look the navigation bar. There are 3 problems: 
- On the left, the navigation buttons  are over the buttons of edition
- On the right, the buttons of navigations don't appear. 
- Besides the n° of page and another information don't appear.

As if the problem was in the CSS level. 
look the print screen  below of this topic
 
Would someone be able to help me? 
Thank you for advance.

Best regards

Andre