ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: gblawler on January 22, 2016, 05:01:22 am
-
Hi, I just recently started using ParamQuery (Pro) v 3.2.0, and have a mostly full implementation done of a simple grid I'm using with support for insert/update/deletes.
I've got the inserts & deletes working fine now, but whenever I go to do an update (I'm using the auto-saving mode, with demo here:
http://paramquery.com/pro/demos/editing_instant
).
In the console on Firefox I get:
TypeError: newcls is undefined
pointing to this line in pqgrid.dev.js: 6581:
TypeError: newcls is undefined
newcls = uniqueArray(newcls.split(/\s+/)).join(" ");
Could anyone help me out on what I'm doing wrong here, if anything? I imagine I may just be missing some option or have an incompatible one set or something, but I'm surprised since the updates and deletes work.
-
Is it possible for you to post your code and full call stack of the error.
-
Call stack from Firebug is:
fn.addClass(_objP=Object { type="object"})pqgrid.dev.js (line 6581)
_pUCData.update(objP=Object { type="object"})pqgrid.dev.js (line 12145)
fn._digestData(ui=Object { type="object"})pqgrid.dev.js (line 5395)
fnGrid.updateRow(ui=Object { type="object"})pqgrid.dev.js (line 12712)
fn.saveEditCell(objP=Object { type="object"})pqgrid.dev.js (line 5214)
_pKeyNav._saveAndMove(objP=Object { type="object"}, evt=Object { type="object"})pqgrid.dev.js (line 7046)
_pKeyNav._keyDownInEdit(evt=Object { type="object"})pqgrid.dev.js (line 7184)
fn._editCell/<(evt=Object { type="object"})pqgrid.dev.js (line 5865)
jQuery.event.dispatch(event=Object { type="object"})jquery.js (line 5094)
jQuery.event.add/elemData.handle(e=Object { type="object"})jquery.js (line 4766)
I hope just my PQ option structure is sufficient for the code:
var gridLFE_opt = {
collapsible: false,
width: 300,
dataModel: {
location: "remote",
dataType: "JSON",
method: "GET",
getUrl: function() {
return {
url: 'ajax_table_read.php',
data: {
TableName: 'LinkedFileEntity',
LinkedFileId: $('#Id').val()
}
};
},
recIndx: 'Id',
getData: function (dataJSON) {
var data = dataJSON.data;
return { totalRecords: dataJSON.totalRecords,
data: data };
}
},
colModel: [
{ dataType: 'integer', dataIndx: 'Id', hidden: true, editable: false },
{ title: "Entity", dataIndx: "EntityName", width: 90,
editor: {
type: 'select',
valueIndx: "value",
labelIndx: "value",
options: [
{ "value": "" },
{ "value": "c" },
{ "value": "d" }
]
},
validations: [{ type: 'minLen', value: 1, msg: "Required"}]
},
{ title: 'Id', dataIndx: "EntityId", width: 70,
validations: [{ type: 'regexp', value: /^[1-9][0-9]*$/, msg: "integer only"}]
},
{ title: "Purpose", dataIndx: "PurposeCode", width: 100,
editor: {
type: 'select',
valueIndx: "value",
labelIndx: "value",
options: [
{ "value": "" },
{ "value": "a" },
{ "value": "b" }
]
},
validations: [{ type: 'minLen', value: 1, msg: "Required"}]
},
{ title: "", editable: false, minWidth: 55, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'></button>";
},
postRender: function (ui) {
var grid = this,
$cell = grid.getCell(ui);
$cell.find(".delete_btn")
.button({ icons: { primary: 'ui-icon-scissors'} })
.bind("click", function (evt) {
if (ui.rowData.Id === undefined ||
confirm('are you sure?'))
grid.deleteRow({ rowIndx: ui.rowIndx });;
});
}
}
],
editable: true,
title: 'Links',
hwrap: false,
numberCell: { show: false },
toolbar: {
items: [
{ type: 'button', cls: 'two_em', icon: 'ui-icon-plus', listener:
{ "click": function (evt, ui) {
var rowIndx = grid.addRow({ rowData: {
PurposeCode: $('#PurposeCode').val()
}});
grid.goToPage({ rowIndx: rowIndx });
grid.editFirstCellInRow({ rowIndx: rowIndx });
}
}
},
{ type: 'button', cls: 'two_em', icon: 'ui-icon-arrowrefresh-1-e',
listener:
{ "click": function (evt, ui) { grid.refreshDataAndView(); }
}
},
{
type: "<span class='saving'>Saving...</span>"
}
]
},
postRenderInterval: -1,
trackModel: { on: true },
change: function (evt, ui) {
var grid = this;
if (grid.isDirty() && grid.isValidChange({allowInvalid: true}).valid) {
var changes = grid.getChanges({ format: 'byVal', all: false });
if (changes.addList) {
for (var i = 0; i < changes.addList.length; i++) {
changes.addList[i].LinkedFileId = $('#Id').val();
if (changes.addList[i].PurposeCode === undefined)
changes.addList[i].PurposeCode = $('#PurposeCode').val();
}
$.ajax({
url: "ajax_table_dml.php",
data: {
TableName: 'LinkedFileEntity',
list: JSON.stringify({
addList: changes.addList,
updateList: changes.updateList,
deleteList: changes.deleteList
})
},
dataType: 'json',
async: true,
beforeSend: function(jqXHR, settings) {
$('.saving', grid.widget()).show();
},
success: function(changes) {
grid.commit({ type: 'add', rows: changes.addList});
grid.commit({ type: 'update', rows: changes.updateList});
grid.commit({ type: 'delete', rows: changes.deleteList});
},
complete: function() {
$('.saving', grid.widget()).hide();
}
});
}
}
}
};
Thanks for reviewing my issue.
-
I don't see anything wrong with the posted code. Is there more code?
Mentioned error can arise if trackModel.dirtyClass has been unset. Have you set trackModel with option method e.g., grid.option( "trackModel", {....} ); somewhere else in your code or change default values of trackModel.
Try to replace trackModel: { on: true } with trackModel: { on: true, dirtyClass: 'pq-cell-dirty' } in pqGrid initialization options.
What is the jQuery/ jQueryUI versions you have been using. Please try to use latest versions.
Please share a complete test case as attachment if the error is not resolved.
-
Try to replace trackModel: { on: true } with trackModel: { on: true, dirtyClass: 'pq-cell-dirty' } in pqGrid initialization options.
That did it, simply putting the dirtyClass specific on there.
Also, I do not think that I am changing trackModel anywhere else in the code, it's only initialized up front.
Thanks for your support!