Not binding detailView in nested grid.

[rsk]

I am trying to bind detailview in the nested grid. But eventhough detailview returns data still it show no rows to display. I am using ParamQuery Pro v2.2.0.


$(function () {
        var colM = [
            { title: "", minWidth: 27, width: 50, type: "detail", resizable: false, editable: false },
            {
                title: "Group Name", width: 500, dataIndx: "GroupName",
                filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
            },
            {
                title: "Group Description", width: 400, dataIndx: "Name",
                filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
            },
            {
                title: "User ID", width: 200, dataType: "integer", dataIndx: "UserId", editable: false,
                filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
            }
           
        ];

        var dataModel = {
            location: "local",
            sorting: "local",           
            dataType: "JSON",
            method: "GET",
            recIndx: "UserId",
            rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]
           
        }
        var obj = {
            width: "100%", height: 800,
            dataModel: dataModel,
            virtualX: true, virtualY: true,
            showTop: false,
            editable: false,
            colModel: colM,
            wrap: false,
            hwrap: false,
            rowBorders: true,
            roundCorners: false,
            columnBorders: true,
            numberCell: { show: false },
            filterModel: { on: true, mode: "AND", header: true },
            resizable: true,
            showBottom: true,
            freezeCols: 1,
            pageModel: { type: "local" },
            //scrollModel: { autoFit: true },
            selectionModel: { type: 'cell' },
            detailModel: {
                cache: true,
                collapseIcon: "ui-icon-plus",
                expandIcon: "ui-icon-minus",
                init: function (ui) {
                    var newData = [];
                    newData.UserId = ui.rowData.UserId;
                    newData.UserName = ui.rowData.UserName;
                    newData.Name = ui.rowData.Name;
                    newData['pq_detail'] = { 'show': true };
                    var rowData = ui.rowData,
                           detailobj = gridDetailModel($(this).pqGrid('instance'), rowData),
                      //  detailobj = gridDetailModel($(this), rowData), //get a copy of gridDetailModel                       
                         $grid = $("<div/>").pqGrid(detailobj); //init the detail grid.
                 
                    return $grid;
                }
            }
        };
        var $gridMain = $("div#myUserGroups").pqGrid(obj);
        //load all data at once
        $gridMain.pqGrid("showLoading");
        $.ajax({
            url: urlGroups,         
            cache: false,
            async: true,
            dataType: "JSON",
            success: function (response) {
                $gridMain.pqGrid("option", "dataModel.data", response);

                $gridMain.pqGrid("refreshDataAndView");
                $gridMain.pqGrid("hideLoading");
            }
        });
        /*
        * another grid in detail view.
        * returns a new copy of detailModel every time the function is called.
     
        */
        var gridDetailModel = function ($gridMain, rowData) {
            var url = "@Url.Action("GetUserGroups", "Admin")";
            return {
                height: 300,
                pageModel: { type: "local", rPP: 5, strRpp: "" },
                dataModel: {
                    location: "remote",
                    sorting: "local",
                    dataType: "JSON",
                    method: "GET",
                   
                    error: function () {
                        $gridMain.pqGrid('rowInvalidate', { rowData: rowData });
                    },
                    url: url + "?userId=" + rowData.UserId
                },
                colModel: [
                    { title: "User ID", width: 280,  dataIndx: "UserId" },
                    { title: "User Name", width: 280, dataIndx: "UserName" },
                    { title: "Full Name", width: 280, dataIndx: "Name" }                   
                ],
                editable: false,
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('check browser console for errors');
                    console.log("error: ", textStatus, errorThrown);
                    //gridMain.rowInvalidate({rowData: rowData});
                },
                flexHeight: true,
               
                numberCell: { show: false },             
                showTop: false,
                showBottom: false
            };
        };

        $gridMain.pqGrid("refresh");
    });