Hello, I just bought the pro version and I love what you guys have built here.
My code below is loosely based on the Inline-editing/Auto-save demo (I simplified it for this post). We will have multiple admins who will be editing this data throughout the workday. I would like the data to be refreshed at each edit to show the work of other users . I also want to preserve the undo/redo functionality.
In my code below I call $("#grid_container").pqGrid("refreshDataAndView"); at each successful update to the data. Under the history: method the console will log the ui object showing num_undo:1 and then immediatly showing num_undo:0. If I comment out the $("#grid_container").pqGrid("refreshDataAndView"); line of code the undo/redo function works perfectly. Am I refreshing the data in the wrong way? Is there a way to have both features?
//FROM CHROME CONSOLE
{type: "add", canUndo: true, canRedo: undefined, num_undo: 1, num_redo: 0}
{type: "reset", canUndo:false, canRedo: false, num_undo: 0, num_redo: 0}
//MY CODE
feed = function(arg = "") {
$('.feedback').html(arg);
};
var $grid,
colModel = [
{ title: "Job name",dataIndx: "job_name",minWidth: 180,dataType: "stringi"},
{
title: "Package name",
dataIndx: "pkg_name",
minWidth: 180,
dataType: "stringi",
filter: {
type: "textbox",
condition: "begin",
listeners: ["keyup"]
}
},
{title: "type",dataIndx: "pkg_type",minWidth: 36,dataType: "stringi"},
{title: "Package description",dataIndx: "description",minWidth: 220,dataType: "stringi"]},
{title: "Spec",dataIndx: "spec",minWidth: 100,dataType: "stringi"]}
],
obj = {
toolbar: {
items: [
{
type: 'button',
icon: 'ui-icon-arrowreturn-1-s',
label: 'Undo',
cls: 'changes',
listener: {
"click": function(evt, ui) {
$grid.pqGrid("history", {
method: 'undo'
});
}
},
options: {
disabled: true
}
},
{
type: 'button',
icon: 'ui-icon-arrowrefresh-1-s',
label: 'Redo',
listener: {
"click": function(evt, ui) {
$grid.pqGrid("history", {
method: 'redo'
});
}
},
options: {
disabled: true
}
},
{
type: 'separator'
},
{
type: "<span class=\"feedback\"></span>"
}
]
},
create: function(evt, ui) {
var opts = [];
for (var i = 0; i < colModel.length; i++) {
var column = colModel;
if (column.hidden !== true) {
opts.push(column.dataIndx);
}
}
$(".columnSelector").val(opts);
},
height: 550,
resizable: true,
editor: {
type: 'textbox'
},
editorKeyDown: function(evt, ui) {
if (evt.keyCode == 13) {
evt.originalEvent.keyCode = 40;
}
},
numberCell: {
show: true
},
trackModel: {
on: true
}, //to turn on the track changes.
historyModel: {
checkEditableAdd: true
},
editModel: {
allowInvalid: true,
saveKey: $.ui.keyCode.ENTER,
uponSave: 'next'
},
editor: {
select: true
},
title: "<b>Hydro log</b>",
change: function(evt, ui) {
if (ui.source == 'commit' || ui.source == 'rollback' || !("updateList" in ui)) {
alert("ERROR: Could not format edit data. Please refresh this page.");
return;
}
var grid = $grid.pqGrid('getInstance').grid;
var t_name = $('#t_container').find('input').first().attr('name');
var t_val = $('#t_container').find('input').first().val();
if (ui.addList.length || ui.updateList.length || ui.deleteList.length) {
var send_data = {
table: 'hydro',
par: '0',
list: JSON.stringify({
updateList: ui.updateList,
addList: ui.addList,
deleteList: ui.deleteList
})
};
send_data[t_name + ""] = t_val;
$.ajax({
url: 'grid_update.php',
data: send_data,
dataType: "json",
type: "POST",
async: true,
beforeSend: function(jqXHR, settings) {
feed('Saving...');
},
success: function(feedback) {
$("#grid_container").pqGrid("refreshDataAndView"); // If I comment this out, the undo/redo functionality works fine.
feed(feedback.feedback);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest, "Status: " + textStatus, "Error: " + errorThrown);
},
complete: function() {
$grid.pqGrid("commit", {
type: 'update'
});
}
});
}
},
history: function(evt, ui) {
console.log(ui);
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 + ')'
});
},
colModel: colModel,
dataModel: {
location: "remote",
sorting: "local",
dataType: "JSON",
method: "GET",
rPP: 100000,
recIndx: "id",
url: "grid_json.php?table=hydro",
getData: function(dataJSON) {
return {
data: dataJSON
};
}
},
load: function(evt, ui) {
var grid = $grid.pqGrid('getInstance').grid;
var data = grid.option('dataModel').data;
$(this).pqTooltip();
var ret = grid.isValid({
data: data,
allowInvalid: false
});
},
refresh: function() {
$("#grid_container")
.find("button.delete_btn")
.button({
icons: {
primary: 'ui-icon-scissors'
}
})
.unbind("click")
.bind("click", function(evt) {
var $tr = $(this).closest("tr");
var rowIndx = $grid.pqGrid("getRowIndx", {
$tr: $tr
}).rowIndx;
$grid.pqGrid("deleteRow", {
rowIndx: rowIndx
});
});
}
};
$(function() {
$grid = $("#grid_container").pqGrid(obj);
});
