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 = dataJSON.data;
if (data && data.length) {
data[0]['pq_detail'] = {'show': true};
}
return {curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data};
}
};
$("#services_grid").pqGrid({
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=" + rowData.id
},
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") {
this.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
