Issue is that when i edit any cell and after my editing completes, grid does not mark that cell dirty.
Thus autosave do not call server URL to save data.
Here is my code:
-------------------------
var $grid = jQuery("#grid_json");
jQuery(document).ready(function(){
var gridheight = 700;
var pqVS = {
rpp: 100, //records per page.
init: function () {
this.totalRecords = 0;
this.requestPage = 1; //begins from 1.
this.data = [];
}
};
pqVS.init();
//define common ajax object for addition, update and delete.
var ajaxObj = {
dataType: "JSON",
beforeSend: function () {
this.showLoading();
},
complete: function () {
this.hideLoading();
},
error: function () {
this.rollback();
}
};
//called by delete button.
function deleteRow(rowIndx, grid) {
var ans = window.confirm("Are you sure want to delete?");
if (ans) {
var ProductID = grid.getRecId({ rowIndx: rowIndx });
grid.deleteRow({ rowIndx: rowIndx });
}
}
/**** AUTO SAVE code starts here ***/
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.pqGrid('getEditCell').$cell && $grid.pqGrid('isDirty') && $grid.pqGrid('isValidChange',{ allowInvalid: true }).valid) {
var gridChanges = $grid.pqGrid('getChanges', { format: 'byVal' });
$.ajax($.extend({}, ajaxObj, {
url: "
http://local.project/product",
data: {
cat_id: 3,
list: JSON.stringify( gridChanges )
},
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
$grid.pqGrid( "option", "strLoading", "Saving.." );
$grid.pqGrid( "showLoading" );
},
success: function (changes) {
//commit the changes.
$grid.pqGrid("commit", { type: 'add', rows: changes.addList });
$grid.pqGrid("commit", { type: 'update', rows: changes.updateList });
$grid.pqGrid("commit", { type: 'delete', rows: changes.deleteList });
},
complete: function () {
$grid.pqGrid( "hideLoading" );
$grid.pqGrid( "option", "strLoading", $.paramquery.pqGrid.defaults.strLoading );
}
}));
}
}
//save changes from a timer.
interval = setInterval(saveChanges, 2000);
/**** AUTO SAVE code ends here ***/
var obj = {
hwrap: false,
rowBorders: false,
autoRow: false,
rowHt: 35,
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 = {
catAttr_11: "",
catAttr_13: ""
}; //empty row template
var rowIndx = $grid.pqGrid('addRow', { rowData: rowData });
$grid.pqGrid('goToPage', { rowIndx: rowIndx });
$grid.pqGrid('editFirstCellInRow', { rowIndx: rowIndx });
}
},
{ type: 'separator' },
{
type: 'button',
icon: 'ui-icon-arrowreturn-1-s',
label: 'Undo',
cls: 'changes',
options: { disabled: true },
listener: {
"click": function (evt, ui) {
$grid.pqGrid("history", { method: 'undo' });
}
}
},
{
type: 'button',
icon: 'ui-icon-arrowrefresh-1-s',
label: 'Redo',
options: { disabled: true },
listener: {
"click": function (evt, ui) {
$grid.pqGrid("history", { method: 'redo' });
}
}
}]
},
scrollModel: { autoFit: true },
editor: { select: true },
title: "<b>List Of Products</b>",
change: function (evt, ui) {
//console.log(ui);
//saveChanges can also be called from change event.
},
destroy: function () {
//clear the interval upon destroy.
clearInterval(interval);
},
history: function (evt, ui) {
var $grid = this.widget();
if (ui.canUndo != null) {
$("button.changes", $grid).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$("button:contains('Redo')", $grid).button("option", "disabled", !ui.canRedo);
}
$("button:contains('Undo')", $grid).button("option", { label: 'Undo (' + ui.num_undo + ')' });
$("button:contains('Redo')", $grid).button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
postRenderInterval: -1, //synchronous post render.
swipeModel: { on: false },
selectionModel: { type: 'cell' },
filterModel: { on: true, header: true, type: 'remote' },
resizable: true,
flex:{one: true},
virtualX: true,
virtualY: true,
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 });
},
pageModel: { type: "local", rPP: 100 , rPPOptions: [100,200,300,400,500]},
editable: true,
create: function (evt, ui) {
this.widget().pqTooltip();
},
beforeTableView: function (evt, ui) {
var initV = ui.initV,
finalV = ui.finalV,
data = pqVS.data,
rpp = pqVS.rpp,
requestPage;
if (initV != null) {
//if records to be displayed in viewport are not present in local cache,
//then fetch them from remote database/server.
if (data[initV] && data[initV].pq_empty) {
requestPage = Math.floor(initV / rpp) + 1;
}
else if (data[finalV] && data[finalV].pq_empty) {
requestPage = Math.floor(finalV / rpp) + 1;
}
if (requestPage >= 1) {
if (pqVS.requestPage != requestPage) {
pqVS.requestPage = requestPage;
//initiate remote request.
this.refreshDataAndView();
}
}
}
}
};
obj.dataModel = {
dataType: "JSON",
location: "remote",
recIndx: "ProductID",
url: "
http://local.project/product/getproducts/?cat_id=3",
postData: function () {
return {
pq_curpage: pqVS.requestPage,
pq_rpp: pqVS.rpp
};
},
getData: function (response) {
var data = response.data,
totalRecords = response.totalRecords,
len = data.length,
curPage = response.curPage,
pq_data = pqVS.data,
init = (curPage - 1) * pqVS.rpp;
if (!pqVS.totalRecords) {
//first time initialize the rows.
for (var i = len; i < totalRecords; i++) {
pq_data[i + init] = { pq_empty: true };
}
pqVS.totalRecords = totalRecords;
}
for (var i = 0; i < len; i++) {
pq_data[i + init] = data
;
pq_data[i + init].pq_empty = false;
}
return { data: pq_data }
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
};
obj.colModel = [
{
"title": "Product ID",
"width": "165",
"dataIndx": "ProductID",
"dataType": "integer",
"editable": false
}
,{
"title": "Demo Field",
"width": "165",
"dataIndx": "catAttr_11",
"filter": {
"type": "textbox",
"condition": "begin",
"listeners": ["change"]
},
"editor": {
"type": "textbox"
}
}
,{
"title": "Demo Field 2",
"width": "165",
"dataIndx": "catAttr_13",
"filter": {
"type": "textbox",
"condition": "begin",
"listeners": ["change"]
},
"editor": {
"type": "textbox"
}
,"validations": [
{ type: 'minLen', value: 1, msg: "Required" }
]
}
,{ title: "", editable: false, minWidth: 165, 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);
//delete button
$cell.find(".delete_btn").button({ icons: { primary: 'ui-icon-close'} })
.bind("click", function (evt) {
deleteRow(rowIndx, grid);
});
}
}
];
$grid.pqGrid(obj);
$grid.pqGrid( "option", "height", gridheight );
//check the changes in grid before navigating to another page or refresh data.
$grid.pqGrid("pager").on("beforeChange beforeRefresh", function (evt, ui) {
if ($grid.pqGrid( "isDirty")) {
var ans = window.confirm("There are unsaved changes. Are you sure?");
if (!ans) {
return false;
}
}
});
});
