Hello,
Im trying to replicate a sample from the web site but instead of sending it to a database I want to get it into a variable, so i could send it to the controller, (among with other information from other form). but Im not sure what Im doing wrong here is the code. any idea? I want the values of the grid on the changes variables, no matter if was deleted, updated or a new.
$(function () {
function isEditing($grid) {
var rows = $grid.pqGrid("getRowsByClass", { cls: 'pq-row-edit' });
if (rows.length > 0) {
var rowIndx = rows[0].rowIndx;
$grid.pqGrid("goToPage", { rowIndx: rowIndx });
//focus on editor if any
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
return true;
}
return false;
}
function addRow($grid) {
if (isEditing($grid)) {
return false;
}
//append empty row in the first row.
var rowData = { TransactionAmount: 0 }; //empty row template
$grid.pqGrid("addRow", { rowIndxPage: 0, rowData: rowData });
var $tr = $grid.pqGrid("getRow", { rowIndxPage: 0 });
if ($tr) {
//simulate click on edit button.
$tr.find("button.edit_btn").click();
}
}
var dateEditor = function (ui) {
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
cls = ui.cls,
dc = $.trim(rowData[dataIndx]);
$cell.css('padding', '0');
var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-date-editor' />")
.appendTo($cell)
.val(dc).datepicker({
changeMonth: true,
changeYear: true,
onClose: function () {
$inp.focus();
}
});
}
var colM = [
{
title: "Cash Flow Type", dataIndx: "CashFlowType", width: 110,
editor: {
type: 'select',
options: ['SUSP- TRANSACTION', 'NONE SELECTED']
}
},
{
title: "Transaction Type", dataIndx: "TransactionTypeCode", width: 110,
editor: {
type: 'select',
options: ['RECEIPT', 'PAYMENT', 'NONE SELECTED']
}
},
{
title: "Transaction Amount", dataIndx: "TransactionAmount", dataType: "float", width: 100, align: "right",
editModel: { keyUpDown: true },
render: function (ui) {
return "$" + parseFloat(ui.cellData).toFixed(2);
}
},
{
title: "Transaction Value Date", width: "150", dataIndx: "TransactionValuedate",
editor: {
type: dateEditor
}
},
{
title: "Transaction Date", width: "200", dataIndx: "TransactionDate",
editor: {
type: dateEditor
}
},
{ title: "Customer Reference Number", width: 130, dataIndx: "CustomerReferenceNumber", editable: true },
{ title: "Bank Reference Number", width: 130, dataIndx: "BankReferenceNumber", editable: true },
{ title: "Transaction Description", width: 130, dataIndx: "TransactionDescription", editable: true }
];
var dataModel = {
location: "remote",
dataType: "JSON",
method: "GET",
sortIndx: "ShipCountry",
sortDir: "up",
url: "/pro/invoice/paging",
getData: function (dataJSON) {
return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
}
}
var grid1 = $("div#grid_custom_editing").pqGrid({
width: 1100, height: 350,
title: "Transactions <b>(Statements)</b>",
dataModel: dataModel,
pageModel: { type: "remote", rPP: 50 },
colModel: colM,
sortable: false,
hoverMode: 'cell',
//flexHeight: true,
selectionModel: { type: 'cell' },
editModel: {
saveKey: $.ui.keyCode.ENTER,
select: false,
keyUpDown: false,
cellBorderWidth: 0
},
editor: { type: "textbox" },
numberCell: { show: false },
resizable: true,
toolbar: {
items: [
{
type: 'button', icon: 'ui-icon - gear', label: 'Add Transaction', listeners: [
{
"click": function (evt, ui) {
var $grid = $(this).closest('.pq-grid');
addRow($grid);
}
}
]
}
]
},
wrap: false
});
grid1.on("pqgridquiteditmode", function (evt, ui) {
//exclude esc and tab
if (evt.keyCode != $.ui.keyCode.ESCAPE && evt.keyCode != $.ui.keyCode.TAB) {
grid1.pqGrid("saveEditCell");
}
});
grid1.on("pqgridcellbeforesave", function (evt, ui) {
var isValid = grid1.pqGrid("isValid", { dataIndx: ui.dataIndx, value: ui.newVal }).valid;
if (!isValid) {
grid1.find(".pq-editor-focus").css({ "border-color": "red" });
return false;
}
});
});
var grid = pq.grid("#grid_editing", obj);
var changes = $(".selector").grid("getChanges");
console.log(changes);
