Hi
I'm basing my grid on the example inline editing grid in the demos
//Fill Text Grid
var $grido;
try {
$grido = $("#HFTextGrid").pqGrid("destroy");
}
catch (err) {
}
var colModel = [
{ title: "ID", dataType: "string", width: "75", dataIndx: 0, editable: false },
{
title: "Language: Code", dataType: "string", width: "150", dataIndx: 1, editor: {
type: 'select',
options: ['', 'ENG', 'GER', 'SPN']
}
},
{ title: "Language: Desc", dataType: "string", width: "200", dataIndx: 2 },
{ title: "Text", dataType: "string", width: "250", dataIndx: 3 },
{
title: "", editable: false, minWidth: 165, sortable: false, render: function (ui) {
return "<button type='button' class='edit_btn'>Edit</button>\
<button type='button' class='delete_btn'>Delete</button>";
}
}
];
var dataModel = {
cache: true,
location: "remote",
sortDir: "up",
sortIndx: 1,
sorting: "local",
dataType: "xml",
method: "POST",
getUrl: function () {
return {
url: "@Url.ModuleUrl().Action("AccessHotelDataOptions")",
data: { 'section': "Texts", 'code': ui.rowData[0], 'id': "8" }
};
},
getData: function (dataDoc) {
//debugger;
var obj = { itemParent: "LanguagedText", itemNames: ["id", "code", "description", "text"] };
return { data: $.paramquery.xmlToArray(dataDoc, obj) };
}
};
var obj = {
width: 850, height: 0,
dataModel: dataModel,
colModel: colModel,
pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
title: "<b>Language Options</b>",
flexHeight: true,
paging: true,
draggable: true,
//resizable:true,
scrollModel: { horizontal: false },
showToolbar: false,
collapsible: true,
freezeCols: 0,
selectionModel: {
type: 'cell'
},
hoverMode: 'cell',
editModel: {
saveKey: $.ui.keyCode.ENTER
},
editor: { type: 'textbox', select: true },
quitEditMode: function (evt, ui) {
var $grid = $(this);
if (evt.keyCode != $.ui.keyCode.ESCAPE) {
$grid.pqGrid("saveEditCell");
}
},
//make rows editable selectively.
editable: function (ui) {
var $grid = $(this);
var rowIndx = ui.rowIndx;
if ($grid.pqGrid("hasClass", { rowIndx: rowIndx, cls: 'pq-row-edit' }) == true) {
return true;
}
else {
return false;
}
},
//use refresh event to display jQueryUI buttons and bind events.
refresh: function () {
//debugger;
var $grid = $(this);
if (!$grid) {
return;
}
//delete button
$grid.find("button.delete_btn").button({ icons: { primary: 'ui-icon-close' } })
.unbind("click")
.bind("click", function (evt) {
if (isEditing($grid)) {
return false;
}
var $tr = $(this).closest("tr"),
rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
deleteRow(rowIndx, $grid);
});
//edit button
$grid.find("button.edit_btn").button({ icons: { primary: 'ui-icon-pencil' } })
.unbind("click")
.bind("click", function (evt) {
if (isEditing($grid)) {
return false;
}
var $tr = $(this).closest("tr"),
rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
editRow(rowIndx, $grid);
return false;
});
//rows which were in edit mode before refresh, put them in edit mode again.
var rows = $grid.pqGrid("getRowsByClass", { cls: 'pq-row-edit' });
if (rows.length > 0) {
var rowIndx = rows[0].rowIndx;
editRow(rowIndx, $grid);
}
},
cellBeforeSave: function (evt, ui) {
var $grid = $(this);
var isValid = $grid.pqGrid("isValid", ui);
if (!isValid.valid) {
//evt.preventDefault();
return false;
}
}
};
$grido = $("#HFTextGrid").pqGrid(obj);
$("#HotelFacFormOuter").css("display", "block");
$grido = $("#HFTextGrid").pqGrid("refresh");
I also have the editrow function defined similarly
function editRow(rowIndx, $grid) {
$grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
//change edit button to update button and delete to cancel.
var $tr = $grid.pqGrid("getRow", { rowIndx: rowIndx }),
$btn = $tr.find("button.edit_btn");
$btn.button("option", { label: "Update", "icons": { primary: "ui-icon-check" } })
.unbind("click")
.click(function (evt) {
evt.preventDefault();
return update(rowIndx, $grid);
});
$btn.next().button("option", { label: "Cancel", "icons": { primary: "ui-icon-cancel" } })
.unbind("click")
.click(function (evt) {
$grid.pqGrid("quitEditMode");
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
$grid.pqGrid("refreshRow", { rowIndx: rowIndx });
$grid.pqGrid("rollback");
});
}
the edit feature appears to work correctly - but clicking cancel does not perform rollback and I'm left with amended detail displayed in grid. I'm assuming I'm missing something but just cannot see it
