Hi,
I have couple of questions.
1. I knew, up arrow and down arrow works when the cell is in edit mode, but wondering if its possible to also use the left arrow,right arrow keys when the cell is in edit mode ? (same like in excel)
2. My calculated column(say ColB) is at right most of the grid, which is visible only horizontal scroll bar is used. This column is calculated based on one of the column(say ColA) which is on left most side of grid. My grid uses 'AutoSave' option.
Problem is: When I enter value in ColA, calculated value in ColB is not been sent to backend to save, only ColA is being sent. I used refresh method in Change event for updates, but still doesn't help.
I could replicate this in your 'AutoSave' demo. Please find below code, I added two columns 'Units on Order', 'ReOrderLevel'. 'ReOrder Level' column is calcualted one.. Added console statement in change event, to notice the behavior.
$(function () {
var obj = {
hwrap: false,
resizable: true,
rowBorders: false,
numberCell: { show: true },
trackModel: { on: true }, //to turn on the track changes.
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener:
{ "click": function (evt, ui) {
//append empty row at the end.
var rowData = { ProductName: 'new product', UnitPrice: 0.2 }; //empty row
var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
$grid.pqGrid("goToPage", { rowIndx: rowIndx });
$grid.pqGrid("setSelection", null);
$grid.pqGrid("setSelection", { rowIndx: rowIndx, dataIndx: 'ProductName' });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
},
{ type: 'separator' },
{ 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: "<span class='saving'>Saving...</span>"
}
]
},
width:600,
height:400,
historyModel: {
checkEditableAdd: true
},
editModel: {
//allowInvalid: true,
saveKey: $.ui.keyCode.ENTER,
uponSave: 'next'
},
editor: {
select: true
},
title: "<b>Auto save</b>",
change: function (evt, ui) {
//debugger;
if (ui.source == 'commit' || ui.source == 'rollback') {
return;
}
console.log(ui);
var $grid = $(this),
grid = $grid.pqGrid('getInstance').grid;
var rowList = ui.rowList,
addList = [],
recIndx = grid.option('dataModel').recIndx,
deleteList = [],
updateList = [];
for (var i = 0; i < rowList.length; i++) {
var obj = rowList,
rowIndx = obj.rowIndx,
newRow = obj.newRow,
type = obj.type,
rowData = obj.rowData;
if (type == 'add') {
var valid = grid.isValid({ rowData: newRow, allowInvalid: true }).valid;
if (valid) {
addList.push(newRow);
}
}
else if (type == 'update') {
var valid = grid.isValid({ rowData: rowData, allowInvalid: true }).valid;
if (valid) {
if (rowData[recIndx] == null) {
addList.push(rowData);
}
//else if (grid.isDirty({rowData: rowData})) {
else {
grid.refresh();
updateList.push(rowData);
console.log(rowData);
}
}
}
else if (type == 'delete') {
if (rowData[recIndx] != null) {
deleteList.push(rowData);
}
}
}
if (addList.length || updateList.length || deleteList.length) {
$.ajax({
url: '/pro/products/batch',
data: {
list: JSON.stringify({
updateList: updateList,
addList: addList,
deleteList: deleteList
})
},
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
$(".saving", $grid).show();
},
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 () {
$(".saving", $grid).hide();
}
});
}
},
history: function (evt, ui) {
var $grid = $(this);
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: [
{ title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80 },
{ title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName",
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{ type: 'maxLen', value: 40, msg: "length should be <= 40" }
]
},
{ title: "Quantity Per Unit", hidden: true, width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit",
validations: [
{ type: 'minLen', value: 1, msg: "Required." },
{ type: 'maxLen', value: 20, msg: "length should be <= 20" }
]
},
{ title: "Unit Price", width: 100, dataType: "float", align: "right", dataIndx: "UnitPrice",
validations: [
{ type: 'nonEmpty', msg: "Required" },
{ type: 'gt', value: 0.5, msg: "better be > 0.5", warn: true}],
render: function (ui) {
var cellData = ui.cellData;
if (cellData != null) {
return "$" + parseFloat(ui.cellData).toFixed(2);
}
else {
return "";
}
}
},
{ title: "Units In Stock", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsInStock",
validations: [{ type: 'gte', value: 0, msg: "Required"}]
},
{ title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued",
editor: { type: "checkbox", subtype: 'triple', style: "margin:3px 5px;" },
validations: [{ type: 'nonEmpty', msg: "Required"}]
},
{ title: "Units On Order", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsOnOrder"
},
{ title: "Reorder Level", width: 100, dataType: "integer", align: "right", dataIndx: "ReorderLevel",
editable:false,
render:function(ui){
ui.rowData['ReorderLevel'] = parseFloat(ui.rowData['UnitsOnOrder']/ui.rowData['UnitsInStock']).toFixed(0);
return ui.rowData['ReorderLevel'];
}
},
{ title: "", editable: false, minWidth: 85, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>Delete</button>";
}
}
],
pageModel: { type: "local", rPP: 20 },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ProductID",
url: "/pro/products/get", //for ASP.NET
//url: "/pro/products.php", //for PHP
getData: function (response) {
return { data: response.data };
}
},
load: function (evt, ui) {
var grid = $(this).pqGrid('getInstance').grid,
data = grid.option('dataModel').data;
$(this).pqTooltip();
var ret = grid.isValid({ data: data, allowInvalid: false });
},
refresh: function () {
$("#grid_editing").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 });
});
}
};
var $grid = $("#grid_editing").pqGrid(obj);
});
