I have a page with nested grids on it. On the master grid I have a button to that calls the code below that I will be using as a popup to select new detail records. The problem that I am having is on the popup it is not following the directives correctly, for the title of the columns it is using the json field name, and it is not using the proper width. I was able to verify that it is following the datatype.
I thought my variables might be clashing with the grids on the main page, so I changed them from colModel to songcolModel and dataModel to songdataModel but that didn't seem to make a difference.
function addsongtoservice(rowIndx, grid) {
var songcolModel = [
{Title: "Title", dataType: "string", dataIndx: "title"},
{Title: "Artist", dataType: "string", dataIndx: "artist"},
{Title: "Arrangement", dataType: "string", dataIndx: "arrangement"},
{Title: "Key", dataType: "string", dataIndx: "key", width: 75},
{Title: "Time", dataType: "string", dataIndx: "time_signature", width: 75},
{Title: "BPM", dataType: "integer", dataIndx: "bpm", width: 75},
{Title: "Uses", dataType: "integer", dataIndx: "count", width: 75},
{Title: "Last Used", dataType: "date", dataIndx: "last", width: 150}
];
var songdataModel = {
location: "remote",
dataType: "JSON",
url: "utilities/ajax_get_addsong_data_JSON.php",
getData: function (dataJSON) {
var data = dataJSON.data;
return {data: data};
}
};
var obj = {
width: "1000",
height: "1000",
selectionModel: {type: 'cell'},
dataModel: songdataModel,
colModel: songcolModel,
autoSizeInterval: 0,
scrollModel: {autoFit: true},
dragColumns: {enabled: false},
toggle: function (evt, ui) {
$("#popup").dialog({
closeOnEscape: ui.state !== 'max'
});
//fix for IE
if (ui.state === 'max') {
$(".ui-dialog,.ui-widget-overlay").css('position', 'static');
} else {
$(".ui-dialog,.ui-widget-overlay").css('position', 'absolute');
}
}
};
$("#popup")
.dialog({
height: 800,
width: 700,
//width: 'auto',
modal: true,
open: function (evt, ui) {
$("#grid_popup").pqGrid(obj);
},
close: function () {
$("#grid_popup").pqGrid('destroy');
},
show: {
effect: "blind",
duration: 500
}
});
}