jQuery Grid Plugin - jqGrid

Hi,

Have been working with jGrid for a week now and have got a basic grid with paging and sorting working fine. I've now been asked to add a subgrid to show extended details of each row and my solution isn't work. The grid loads fine and show the data, but when I click on the '+' next to each row, the loading div is shown and the grid data disappears. Behind the scenes the function _FetchTravellers is called for the subgrid instead of _FetchTravellersDetails.

Am I doing something really wrong? Please excuse any stupidity as I'm a .Net developer and have been working with jQuery and this grid for just over a week now! Please let me know if more information is required.

I'm using ASP.NET and WCF to get the data.

jGrid 3.5.3

Here's my code for the grid:

$('#grid').jqGrid({
                datatype: Function.createDelegate(this, this._FetchTravellers),
                colNames: ['Code', 'FirstName', 'Surname', 'Email', 'Office', '', ''],
                colModel: [
                    { name: 'code', index: 'code', key: true, search: false, hidden: true },
                    { name: 'firstname', index: 'firstname', sorttype: 'text' },
                    { name: 'surname', index: 'surname', sorttype: 'text' },
                    { name: 'email', index: 'email', sorttype: 'text', width: 120 },
                    { name: 'office', index: 'office', sorttype: 'text', width: 70 },
                    { name: 'edit', index: 'edit', align: 'center', search: false, sortable: false, width: 55 },
                    { name: 'remove', index: 'remove', align: 'center', search: false, sortable: false, width: 80}],
                rowNum: 20,
                rowList: [10, 20, 30],
                viewrecords: true,
                pager: $('#grid'),
                height: 300,
                width: 550,
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    id: "code",
                    subgrid: { root: 'rows', repeatitems: false }
                },
                subGrid: true,
                subGridType: Function.createDelegate(this, this._FetchTravellerDetails),
                subGridModel: [{
                        name: ['one', 'two'],
                        index: ['one', 'two'],
                        mapping: ['one', 'two'],
                        width:[100,100]}]
                });

      _FetchTravellers: function(postdata) {
            // do web request
            $.ajax({
                url: this._ServicePath + '/' + this._ServiceFetchTravellersMethod,
                data: JSON.stringify(postdata),
                dataType: 'json',
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: Function.createDelegate(this, this._onDataFetchOk),
                error: Function.createDelegate(this, this._onDataFetchFailed)
            });
        },

        _onDataFetchOk: function(ajaxData, stat) {
            var thegrid = $('#' + this._dataTableID)[0];
            var jdata = JSON.parse(ajaxData.d);
            thegrid.addJSONData(jdata);

            var ids = $('#' + this._dataTableID).getDataIDs();
            for (var i = 0; i < ids.length; i++) {
                var ft = ids[i];
                editLink = "<a href=\\"../FrequentTraveller/TravellerDetails.aspx?id=" + ft + "\\">edit</a>";
                removeLink = "<a href=\\"#\\">remove</a>";
                $('#' + this._dataTableID).setRowData(ids[i], { edit: editLink });
                $('#' + this._dataTableID).setRowData(ids[i], { remove: removeLink });
            }
        },

        _onDataFetchFailed: function(error) {
            $get(this.get_lblFeedbackID()).value = "There was a problem performing that search."
        },

        _FetchTravellerDetails: function(postdata) {
            // do web request
            $.ajax({
                url: this._ServicePath + '/GetFrequentTravellersDetails',
                data: JSON.stringify(postdata),
                dataType: 'json',
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(jsondata,stat){
                    if(stat=="success") {
                        var thegrid = $('#' + this._dataTableID)[0];
                        thegrid.subGridJson(eval("("+jsondata.responseText+")"),rowidprm.id);
                    }
                },
                error: Function.createDelegate(this, this._onDataFetchFailed)
            });
        },

        _onDataDetailsFetchOk: function(ajaxData, stat) {
            var thegrid = $('#' + this._dataTableID)[0];
            var jdata = JSON.parse(ajaxData.d);
            thegrid.addJSONData(jdata);
            thegrid.subGridJson(eval("(" + ajaxData.responseText + ")"), rowidprm.id);
        }