Not working trackModel and getChanges function return blank array.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="pqgrid.min.css" />
<link rel="stylesheet" href="pqgrid.ui.min.css" />
<link rel="stylesheet" href="pqselect.min.css"/>
<link rel="stylesheet" href="pqgrid_thiemes.css"/>
<script src="
https://paramquery.com/pqTouch/pqtouch.min.js"></script>
<script src="
https://paramquery.com/pqselect/trial/pqselect.min.js"></script>
<script src="pqgrid.min.js"></script>
<script src="pq-localize-en.js"></script>
<script src="jszip.min.js"></script>
<style>
body{ font-size:13px;}
</style>
</head>
<body>
<script type="text/javascript">
$(function () {
//called when save changes button is clicked.
function saveChanges() {
var grid = this;
//attempt to save editing cell.
if (grid.saveEditCell() === false) {
return false;
}
if (grid.isDirty() && grid.isValidChange({ focusInvalid: true }).valid) {
var gridChanges = grid.getChanges({ format: 'byVal' });
//post changes to server
$.ajax({
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.showLoading();
},
url: "/pro/products/batch", //for ASP.NET, java
//url: '/products.php?pq_batch=1', for PHP
data: {
//JSON.stringify not required for PHP
list: JSON.stringify(gridChanges)
},
success: function (changes) {
//debugger;
grid.commit({ type: 'add', rows: changes.addList });
grid.commit({ type: 'update', rows: changes.updateList });
grid.commit({ type: 'delete', rows: changes.deleteList });
grid.history({ method: 'reset' });
},
complete: function () {
grid.hideLoading();
}
});
}
}
var data=[{ rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0,company2: 'Exxon Mobil', revenues2: 339938.0, profits2: 376130.0},
{ rank: 2, company: ' Mobil Exxon', revenues: 139938.0, profits: 36130.0,company2: 'AExxon BMobil', revenues2: 19938.0, profits2: 376130.0}];
var obj = {
hwrap: false,
//autoRow: false,
rowHt: 32,
rowBorders: false,
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 = { ProductID: 34, UnitPrice: 0.2 }; //empty row
var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
this.goToPage({ rowIndx: rowIndx });
this.editFirstCellInRow({ rowIndx: rowIndx });
}
},
{ type: 'separator' },
{
type: 'button', icon: 'ui-icon-disk', label: 'Save Changes', cls: 'changes', listener: saveChanges,
options: { disabled: true }
},
{
type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', cls: 'changes', listener: function () {
this.rollback();
this.history({ method: 'resetUndo' });
},
options: { disabled: true }
},
{
type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', cls: 'changes', listener: function () {
var changes = this.getChanges();
if (console && console.log) {
console.log(changes);
}
alert("Please see the log of changes in your browser console.");
},
options: { disabled: true }
},
{ type: 'separator' },
{
type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener: function () {
this.history({ method: 'undo' });
},
options: { disabled: true }
},
{
type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener: function () {
this.history({ method: 'redo' });
},
options: { disabled: true }
}
]
},
scrollModel: {
autoFit: true
},
swipeModel: { on: false },
editor: {
select: true
},
title: "<b>Batch Editing</b>",
history: function (evt, ui) {
var $tb = this.toolbar();
if (ui.canUndo != null) {
$("button.changes", $tb).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$("button:contains('Redo')", $tb).button("option", "disabled", !ui.canRedo);
}
$("button:contains('Undo')", $tb).button("option", { label: 'Undo (' + ui.num_undo + ')' });
$("button:contains('Redo')", $tb).button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
colModel: [
{ title: "rank", dataType: "integer", dataIndx: "rank", editable: false, width: 80 },
{
title: "Product Name", width: 165, dataType: "string", dataIndx: "company",
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{ type: 'maxLen', value: 40, msg: "length should be <= 40" }
]
},
{
title: "company2", width: 140, dataType: "string", align: "right", dataIndx: "company2",
validations: [
{ type: 'minLen', value: 1, msg: "Required." },
{ type: 'maxLen', value: 20, msg: "length should be <= 20" }
]
},
{
title: "Unit Price", width: 100, dataType: "float", dataIndx: "revenues",
validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5" }],
render: function (ui) {
var cellData = ui.cellData;
if (cellData != null) {
return "$" + parseFloat(ui.cellData).toFixed(2);
}
else {
return "";
}
}
},
{ hidden: true },
{
title: "", editable: false, minWidth: 83, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>Delete</button>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
$cell.find("button").button({ icons: { primary: 'ui-icon-scissors' } })
.bind("click", function () {
grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });
setTimeout(function () {
var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
grid.deleteRow({ rowIndx: rowIndx });
}
})
});
}
}
],
postRenderInterval: -1, //call postRender synchronously.
pageModel: { type: "local", rPP: 20 },
create: function () {
this.widget().pqTooltip();
},
dataModel: {data:data}
};
pq.grid("#grid_editing", obj);
});
</script>
<div id='grid_editing'></div>
</body>
</html>
