jQuery Grid Plugin - jqGrid

Hi,

I'l unabled to populate a jqgrid with json data :

the data :

{ "total": "1","page": "1","records": "9","rows":[ { "id": 1,"cell":[ "1","Davolio","Nancy","F"]}, { "id": 2,"cell":[ "2","Fuller","Andrew","F"]}, { "id": 3,"cell":[ "3","Leverling","Janet","F"]}, { "id": 4,"cell":[ "4","Peacock","Margaret","F"]}, { "id": 5,"cell":[ "5","Buchanan","Steven","F"]}, { "id": 6,"cell":[ "6","Suyama","Michael","M"]}, { "id": 7,"cell":[ "7","King","Robert","M"]}, { "id": 8,"cell":[ "8","Callahan","Laura","M"]}, { "id": 9,"cell":[ "9","Dodsworth","Anne","M"]} ]}

the script :

 function Button1_onclick() {
 
            jQuery(document).ready(function () {
                $('#liste').jqGrid({
                    datatype: function () {
                        $.ajax({
                            url: "WS.asmx/ListeEmployes",
                            data: "{}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            complete: function (jsondata, stat) {
                                if (stat == "success") {
                                    var thegrid = jQuery("#liste")[0];
                                    var datajson = JSON.parse(jsondata.responseText).d;
                                    thegrid.addJSONData(datajson);
                                    alert(datajson);
                                }
                            }
                        });
                    },
 
                    colNames: ['EmployeeID', 'LastName', 'FirstName', 'empSex'],
 
                    colModel: [
                    {name: 'EmployeeID', index: 'EmployeeID',width: 200},
                    {name: 'LastName', index: 'LastName', width: 200}, 
                    {name: 'FirstName', index: 'FirstName', width: 200},
                    {name: 'empSex', index: 'empSex', width: 100, align: 'center'}
                    ],
 
               
 
                    pager: jQuery('#pager'),
                    rowNum: 10,
                    rowList: [10,20,30],
                    sortname: 'EmployeeID',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: 'images',
                    caption: 'My first grid',
 
 
                    jsonReader: {
                    page: "page",
                    total: "total",
                    root: "rows",
                    id: "id",
                    records: "records",
                    repeatitems: false,
                    cell: "cell"
                    },
 
 
                }).navGrid("#pager", { edit: true, add: true, del: true });
            });
        }

the grid is well formated but empty.

I can manually load data in the grid with this script bellow :

jQuery("#a4").click(function () {
                var datarow = { EmployeeID: "10", LastName: "test LN", FirstName: "test FN", empSex: "M" };
                jQuery("#liste").jqGrid('addRowData', 99, datarow);
                 });

can you tell what I'm doing wrong, 

regards