I am using a version of the "editing_instant" demo that loads xml data and attempts to call a ColdFusion .cfc in the SaveChanges function. When I debug this function and attempt to delete a row, the event is detected and sent to the SaveChanges function. However, when I edit an individual cell or add a new row, the Add/Update events are not triggered by the Grid. Below is the code I am using. The debugger call is only being triggered when a row is deleted. The debugger does not get activated when a cell change is made or a new row is added.
$(function () {
// ********************************************
// ************** SAP Grid Code ***************
// ********************************************
var interval;
function saveChanges() {
/**
1. if there is no active ajax request.
2. there is no ongoing editing in the grid.
3. grid is dirty.
4. all changes are valid.
*/
if (!$.active && !grid.getEditCell().$cell && grid.isDirty() && grid.isValidChange({ allowInvalid: true }).valid) {
var gridChanges = grid.getChanges({ format: 'byVal' });
debugger
$.ajax({
//url: '/pro/products/batch', // for ASP.NET, java
//url: '/products.php?pq_batch=1', // for PHP
url: 'exp/cfpagelets/_sts/gridEdits.cfc', // for ColdFusion
data: {
method: "realtimeEdit",
list: JSON.stringify( gridChanges )
},
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.option("strLoading", "Saving..");
grid.showLoading();
},
success: function (changes) {
//commit the changes.
grid.commit({ type: 'add', rows: changes.addList });
grid.commit({ type: 'update', rows: changes.updateList });
grid.commit({ type: 'delete', rows: changes.deleteList });
},
complete: function () {
grid.hideLoading();
grid.option("strLoading", $.paramquery.pqGrid.defaults.strLoading);
}
});
}
}
//save changes from a timer.
interval = setInterval(saveChanges, 1000);
var obj = {
hwrap: false,
resizable: true,
rowBorders: false,
//autoRow: false,
rowHt: 32,
trackModel: { on: true }, //to turn on the track changes.
toolbar: {
items: [{
type: 'button',
icon: 'ui-icon-plus',
label: 'New Product',
listener: function () {
//append empty row at the end.
var rowData = { glname: 'new account', glcode: '6606.' }; //empty row
var rowIndx = grid.addRow({ rowData: rowData });
grid.goToPage({ rowIndx: rowIndx });
grid.editFirstCellInRow({ rowIndx: rowIndx });
}
},
{ type: 'separator' },
{
type: 'button',
icon: 'ui-icon-arrowreturn-1-s',
label: 'Undo',
options: { disabled: true },
listener: function () {
grid.history({ method: 'undo' });
}
},
{
type: 'button',
icon: 'ui-icon-arrowrefresh-1-s',
label: 'Redo',
options: { disabled: true },
listener: function () {
grid.history({ method: 'redo' });
}
}]
},
scrollModel: { autoFit: true },
editor: { select: true },
title: "<b>Auto save</b>",
change: function (evt, ui) {
//saveChanges can also be called from change event.
},
destroy: function () {
//clear the interval upon destroy.
clearInterval(interval);
},
history: function (evt, ui) {
var $tb = this.toolbar(),
$undo = $tb.find("button:contains('Undo')"),
$redo = $tb.find("button:contains('Redo')");
if (ui.canUndo != null) {
$undo.button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$redo.button("option", "disabled", !ui.canRedo);
}
$undo.button("option", { label: 'Undo (' + ui.num_undo + ')' });
$redo.button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
colModel: [
{ title: "G/L Account", width: 130, dataType: "string" ,dataIndx: "glname", editable: true },
{ title: "G/L Code", width: 110, dataType: "string", dataIndx: "glcode", editable: true},
{ title: "Total", width: 100, dataType: "float", dataIndx: "amount", format: "$#,###.00",
validations: [
{ type: 'nonEmpty', msg: "Required" },
{ type: 'gt', value: 10.00, msg: "better be > 10.00", warn: true}
]
},
{title: "% Share", width: 120, dataIndx: "pctshare", dataType: "float", format: '##.00%', editable: true},
{title: "VAT Payable", width: 120, dataIndx: "vatpayable", dataType: "float", format: '$##,###.00', editable: true},
{title: "CIT Payable", width: 120, dataIndx: "citpayable", dataType: "float", format: '$##,###.00', editable: true},
{title: "Urban Main & Const Fee", width: 120, dataIndx: "urbansurc", dataType: "float", format: '$##,###.00', editable: true},
{title: "Educ Surch", width: 120, dataIndx: "edsurc", dataType: "float", format: '$##,###.00', editable: true},
{title: "Loc Educ Sur Share", width: 120, dataIndx: "locsurc", dataType: "float", format: '$##,###.00', editable: true},
{title: "Total Tax Payable", width: 120, dataIndx: "totpayable", dataType: "float", format: '$##,###.00', editable: true},
{ title: "", editable: false, minWidth: 85, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>Delete</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) {
grid.deleteRow({ rowIndx: ui.rowIndx });
});
}
}
],
postRenderInterval: -1, //synchronous post render.
pageModel: { type: "local", rPP: 20 },
dataModel: {
cache: true,
location: "remote",
sortDir: "down",
sorting: "local",
dataType: "xml",
url: "/sts/content/files/data/rawData.xml",
getData: function (dataDoc) {
//debugger;
var obj = { itemParent: "item", itemNames: ["glname", "glcode", "amount", "pctshare", "vatpayable", "citpayable", "urbansurc", "edsurc", "locsurc", "totpayable" ] };
return { data: $.paramquery.xmlToJson(dataDoc, obj) };
}
},
load: function (evt, ui) {
var grid = this,
data = grid.option('dataModel').data;
grid.widget().pqTooltip(); //attach a tooltip.
//validate the whole data.
grid.isValid({ data: data });
}
};
var grid = pq.grid("#SAP", obj);
});
Below is a sample of what. the XML file looks like in case you need it. I was not able to upload the file due to file restrictions in your upload function.
<entry>
<item id="107">
<glname>Tel/Fax</glname>
<glcode>604012</glcode>
<activity>M22AXCH042</activity>
<region>CHK</region>
<country>CH</country>
<project>0000</project>
<amount>2279.4</amount>
<pctshare>0.00294198109708</pctshare>
<vatpayable>160.898823529</vatpayable>
<citpayable>0</citpayable>
<urbansurc>11.262917647</urbansurc>
<edsurc>4.82696470587</edsurc>
<locsurc>3.21797647058</locsurc>
<totpayable>180.206682352</totpayable>
</item>
<item id="107">
<glname>Rent & Utilities</glname>
<glcode>604000</glcode>
<activity>M22AXCH042</activity>
<region>CHK</region>
<country>CH</country>
<project>0000</project>
<amount>704.3</amount>
<pctshare>0.000909027501393</pctshare>
<vatpayable>49.7152941176</vatpayable>
<citpayable>0</citpayable>
<urbansurc>3.48007058823</urbansurc>
<edsurc>1.49145882353</edsurc>
<locsurc>0.994305882352</locsurc>
<totpayable>55.6811294117</totpayable>
</item>
<item id="107">
<glname>Tel/Fax</glname>
<glcode>604012</glcode>
<activity>M22AXCH042</activity>
<region>CHK</region>
<country>CH</country>
<project>0000</project>
<amount>100</amount>
<pctshare>0.000129068223966</pctshare>
<vatpayable>7.05882352944</vatpayable>
<citpayable>0</citpayable>
<urbansurc>0.494117647061</urbansurc>
<edsurc>0.211764705883</edsurc>
<locsurc>0.141176470589</locsurc>
<totpayable>7.90588235297</totpayable>
</item>
</entry>
Finally, the following 2 screenshots show how the toolbar is not visible unless I click on the fullscreen button on the right.
Thanks for all the help on this.
Regards,
Peter B
