jQuery Grid Plugin - jqGrid

I'm trying to populate my first jqGrid by getting data from a service.  However the data I'm getting is shown below(This was output from Fiddler).

{"GetContResult":

"{"total":1,

"page":1,

"records":3,

"rows":[

{"ID":1,"PersonID":2,"Company":"","Tax":14,"Gross":64},

{"ID":2,"PersonID":3,"Company":"","Tax":22,"Gross":11},

{"ID":3,"PersonID":4,"Company":"","Tax":22,"Gross":11},

]}"}

My Code for populating the grid looks like below:

 $("#contributions").jqGrid({
        url: '../test.svc/GetContributions',
        postData: { schemeId: schemeid, personId: memberid },
        mtype: 'POST',
        dataype:'json',
//        loadonce: true,
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        serializeGridData: function (GetContributionsResult) {
            return JSON.stringify(GetContributionsResult);
        },
        jsonReader: {
            root: function (obj) { return obj; },
            page: function (obj) { return 1; },
            total: function (obj) { return 3; },
            records: function (obj) { return obj.length; },
            repeatitems: false,
            id: "ID"
        },
        colNames: ["Company", "Tax", "Gross", "Net"],
        colModel: [
    { name: "Company", index: "Company", width: 150 },
    { name: "Tax", index: "Tax", width: 150 },
    { name: "Gross", index: "Gross", width: 150 }
   ],
        rowNum: 10,    
        rowList: [10, 20, 300],    
        sortname: 'Company',    
        sortorder: "asc",
        caption: "Contributions",
        width: "950″,
        pager:$("#pager"),
        viewrecords: true,    
        gridview: true,    
        rownumbers: true,
    });

At the moment nothing happens and my Grid doesn't populate, any help to push me in the right direction will be really appreciated.

Thanks in advance