jQuery Grid Plugin - jqGrid

Hi,

I've worked with jqgrid a fair amount in php and thus I was hoping I could use it ASP.  Seems that's possible based on the docs but I can't seem to get it working.

Currently my webservice just returns a a sample peice of JSON text - based on the doc defs

Grid Def:

        jQuery("#list").jqGrid({
            //url: "WebService2.asmx/GetDistributionList",
            //data: "{'ID':'" + $('#ddReports :selected').val() + "'}",
            //datatype: 'json',
            //mtype: 'GET',
            //postData: { ReportID: $('#ddReports :selected').val() },
            datatype: function() {
                if ($('#ddReports :selected').val() != undefined) {
                    $(".loading").show();
                    //console.log(postdata);
                
                    jQuery.ajax({
                        url: 'WebService2.asmx/GetDistributionList',
                        data: JSON.stringify({ ReportID: $('#ddReports :selected').val() }),
                        //data: "{'ReportID':'" + $('#ddReports :selected').val() + "'}",
                        //data: JSON.stringify(postdata),
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function(data) {
                            console.log('success function of ajax call');
                            var mygrid = $("#list")[0];
                            //console.log('data is ' + data);
                            //console.log('data.d is ' + data.d);
                            mygrid.addJSONData(data);
                        }
                    });
                }
            },
            loadComplete: function(data) {
                console.log('Grid Complete Function');
                $(".loading").hide();            
            },
            jsonReader: {
                root: "d.rows",
                page: "d.page",
                total: "d.total",
                records: "d.records",
                repeatitems: true,
                cell: "cell",
                id: "id",
                userdata: "userdata",
                subgrid: { root: "d.rows",
                    repeatitems: true,
                    cell: "cell"
                }
            },
            gridComplete: function() {
                $(".loading").hide();
            },
            colNames: ['A', 'B', 'C', 'D'],
            colModel: [
                { name: 'a', width: 300 },
                { name: 'b', width: 300 },
                { name: 'c', width: 200, align: 'right' },
                { name: 'd', width: 100, align: 'right' }
            ],
            pager: '#pager',
            rowNum: 100,
            rowList: [100, 200, 300],
            sortname: 'invid',
            sortorder: 'desc',
            viewrecords: true,
            width: 900,
            height: 400,
            caption: 'Distribution List'
        });

Doing a quick console.log of the data response I receive and object and the 'd' value is