Author Topic: No Row Data on detail records  (Read 2663 times)


  • Pro Enterprise
  • Newbie
  • *
  • Posts: 46
    • View Profile
No Row Data on detail records
« on: September 14, 2016, 05:38:35 am »
I'm trying to create a nested grid but when it runs I get 'No Row Data' in the detail grid and then it closes immediately. I see data coming back in the ajax call.

/* Services grid */
$(function () {

    var colM = [
        {title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false},
        {title: "ID", width: 75, dataIndx: "id", align: "center"},
        {title: "Date", width: 125, dataIndx: "date", align: "left"},
        {title: "Location", width: 250, dataIndx: "location", align: "left",
            filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']}
        {title: "Leader", width: 250, dataIndx: "leader", align: "right",
            filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']}},

    var dataModel = {
        location: "remote",
        dataType: "JSON",
        method: "GET",
        recIndx: "id",
        url: "utilities/ajax_get_services_data_JSON.php",
        getData: function (dataJSON) {
            var data =;
            if (data && data.length) {
                data[0]['pq_detail'] = {'show': true};
            return {curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data};

        width: 750,
        height: 800,
        resizable: true,
        dataModel: dataModel,
        colModel: colM,
        wrap: false,
        hwrap: false,
        numberCell: {show: false},
        flex: {one: true},
        title: "Song List",
        virtualX: true, virtualY: false,
        hoverMode: null,
        selectionModel: {type: 'cell'},
        pageModel: {type: 'local', rPP: 20},
        scrollModel: {flexContent: true},
        detailModel: {
            cache: true,
            collapseIcon: "ui-icon-plus",
            expandIcon: "ui-icon-minus",
            init: function (ui) {
                var rowData = ui.rowData,
                        detailobj = gridDetailModel($(this).pqGrid('instance'), rowData),
                        $grid = $("<div></div>").pqGrid(detailobj);
                return $grid;

    var gridDetailModel = function (gridMain, rowData) {
        return {
            width: "flex",
            height: 'flex',
            pageModel: {type: "local", rPP: 5, strRpp: ""},
            columnBorders: false,
            showTop: false,
            showBottom: false,
            dataModel: {
                location: "remote",
                dataType: "jsonp",
                method: "GET",
                error: function () {
                    gridMain.rowInvalidate({rowData: rowData});
                url: "/utilities/ajax_get_services_song_detail.php?serviceid=" +
            colModel: [
                {title: "Service ID", width: 85, dataIndx: "id"},
                {title: "Title", width: 85, dataIndx: "title"},
                {title: "Description", width: 95, dataIndx: "description"},
                {title: "Key", width: 150, dataIndx: "key"},
                {title: "Time Signature", width: "100", align: "right", dataIndx: "time_signature"}
            refresh: function (evt, ui) {
                if (ui.source != "flex") {
            numberCell: {show: false},
            title: "Song Selections"

This is the data that I am getting back on the call:


{"data":[{"id":"87","title":"Redeemed","description":"Initial arrangement","key":"B","time_signature":null},{"id":"87","title":"Remember","description":"Initial arrangement","key":"E","time_signature":null},{"id":"87","title":"Remind Me Who I Am","description":"Initial arrangement","key":"C","time_signature":"4\/4"}]}

I found the issue. Its JSON not JSONP
« Last Edit: September 14, 2016, 06:42:54 am by stevejacobsen »