Karson18
Reputation: 1
Changing an editable JqGrid row back to Uneditable without using cancel button
I have a question regarding jqgrid. In order to edit a row in my grid you have to select the edit button that is using the action formatter. This makes almost the whole row editable.
My question is that if the user clicks another rows edit button, instead of the cancel or submit button on the currently editable row, is there a way to return the first editable row to a non-editable state while leaving the newly selected row editable?
Here's the grid if you want to check is out. Rather large amount of code. The data is passed to the grid through a function. This is part of a large MVC app. The data is in json format.
Suggestions on which direction to go would be greatly appreciated.
grid.jqGrid({
datatype: "local",
data: gridData,
colNames: ['Action', 'ID', 'Center', 'DBA', 'Check Number', 'Received Date', 'Check Amount', 'Unposted Amount', 'Posted Amount', 'Comments', 'Check Date', 'Received By', 'Withdrawn By', 'Withdrawal Date', 'Witness', 'Is Posted?', 'Is NSed?', 'Refunded Amount', 'Batch Number'],
colModel: [
{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
formatoptions: { keys: true,
delbutton: false,
extraparam: { CheckLogId: getChecklogId, IsPosted: getIsPosted, CheckAmountPosted: getCheckAmountPosted, BatchNumberSequence: getBatchSeqNumber, IsNSed: getIsNSed },
afterSave: afterEditSave,
onSuccess: afterOnSuccess,
afterRestore: function (rowid) {
var acc_list = getAccountDBAOnCenter(last_center);
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
if (!isCurrentUserAdmin) {
grid.setCell(rowid, 2, '', { 'visibility': 'visible' });
}
},
onEdit: function (rowid) {
edit_row_id = rowid;
grid.trigger('reloadGrid');
if (grid.getCell(rowid, 'IsPosted') == true) {
var checkAmountInput = '#' + rowid + '_CheckAmount';
$(checkAmountInput).prop("disabled", true);
}
else {
var checkAmountInput = '#' + rowid + '_CheckAmount';
$(checkAmountInput).prop("disabled", false);
}
if (!isCurrentUserAdmin) {
grid.setCell(rowid, 'CenterId', '', { 'visibility': 'hidden' });
}
checklog_id = grid.getCell(rowid, 'CheckLogId');
batch_sql_num = grid.getCell(rowid, 'BatchNumberSequence');
is_posted = grid.getCell(rowid, 'IsPosted');
check_amount_posted = grid.getCell(rowid, 'CheckAmountPosted');
check_amount_refunded = grid.getCell(rowid, 'CheckAmountRefunded');
is_nsed = grid.getCell(rowid, 'IsNSed');
batch_sql_num = batch_sql_num == '' ? '-' : batch_sql_num;
}
}
},
{ name: "CheckLogId", index: "CheckLogId", width: 40, align: "center", editable: false, hidden: true, editrules: { required: true, edithidden: true }, search: false },
{ name: "CenterId", index: "CenterId", width: 200, align: "left", editrules: { required: true },
editable: true,
formatter: 'select',
edittype: 'select',
editoptions: {
value: getSelectList(center_list),
style: 'width:190px',
dataInit: function (elem) {
var center_id = $(elem).val();
if (center_id == '') {
center_id = $("#center_id").val();
}
last_center = center_id;
var list_data = getAccountDBAOnCenter(center_id);
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(list_data)} });
},
dataEvents: [
{
type: 'change',
fn: function (e) {
resetAccountDBAValues();
var center_id = parseInt($(e.target).val(), 10);
var dba_select_list = getAccountDBAOnCenter(center_id);
var newOptions = '';
$.each(dba_select_list, function (i, dbaRecord) {
newOptions += '<option role="option" value="' +
dbaRecord.AccountId + '">' +
dbaRecord.DBAName + '</option>';
});
if ($(e.target).is('.FormElement')) {
var form = $(e.target).closest('form.FormGrid');
var acccountElm = form.find("select#AccountId.FormElement");
acccountElm.removeAttr("disabled");
acccountElm.html(newOptions);
} else {
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("select#" + rowId + "_AccountId", row[0]).html(newOptions);
}
}
}
]
}, search: false
},
{ name: "AccountId", index: "AccountId", width: 200, align: "left", formatter: 'select', editable: true, editrules: { required: true },
edittype: 'select',
editoptions: { value: dba_select_list_json, style: 'width:190px' },
search: true
},
{ name: "CheckNumber", index: "CheckNumber", width: 110, align: "left", editable: true, editrules: { required: true }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px' }, search: false },
{ name: "ReceivedDate", index: "ReceivedDate", width: 100, align: "center", datefmt: 'm/d/yy', formatter: jsonDateFormatter, editable: true, editrules: { date: false, required: true, custom: true, custom_func: dateValidate }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } }, search: false },
{ name: "CheckAmount", index: "CheckAmount", width: 110, align: "left", formatter: 'currency', editable: true, editrules: { required: true, number: true }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px' }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckAmountUnposted", index: "CheckAmountUnposted", width: 120, align: "center", formatter: uPostFormatter, editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckAmountPosted", index: "CheckAmountPosted", width: 120, align: "center", formatter: 'currency', editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckDescription", index: "CheckDescription", width: 180, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 100, maxlength: 100, style: 'width:200px' }, search: false },
{ name: "CheckDate", index: "CheckDate", width: 100, align: "center", formatter: jsonDateFormatter, editable: true, editrules: { required: true, custom: true, custom_func: checkValidation }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } } },
{ name: "ReceivedBy", index: "ReceivedBy", width: 120, align: "left", editable: true, editrules: { required: true }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "WithdrawnBy", index: "WithdrawnBy", width: 120, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "WithdrawnDate", index: "WithdrawnDate", width: 100, align: "center", datefmt: 'm/d/yy', formatter: jsonDateFormatter, editable: true, editrules: { date: false, required: false, custom: true, custom_func: dateValidate }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } }, search: false },
{ name: "WitnessedBy", index: "WitnessedBy", width: 120, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "IsPosted", index: "IsPosted", width: 75, align: "center", editable: false, formatter: booleanFormatter, unformat: booleanUnFormatter, editrules: { required: true, edithidden: true }, search: false },
{ name: "IsNSed", index: "IsNSed", width: 75, align: "center", editable: false, formatter: booleanFormatter, unformat: booleanUnFormatter, editrules: { required: true, edithidden: true }, search: false },
{ name: "CheckAmountRefunded", index: "CheckAmountRefunded", width: 120, align: "center", formatter: 'currency', editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "BatchNumberSequence", index: "BatchNumberSequence", width: 120, align: "left", editable: false, edittype: 'text', search: false }
],
pager: '#checklog-table-pager',
rowNum: 25,
rowList: [25, 50, 75, 100, 1000000],
gridview: true,
rownumbers: false,
ignoreCase: true,
viewrecords: true,
width: 1040,
height: 400,
autowidth: false,
shrinkToFit: false,
scrolling: true,
loadonce: false,
editurl: '/Payment/SaveChecklog',
loadComplete: loadGridComplete,
ondblClickRow: function (rowid, iRow, iCol, e) {
if (grid.getCell(rowid, 'IsNSed') == false) {
if (showPaymentCallBack) {
showPaymentCallBack(rowid);
}
}
}
}).jqGrid('navGrid', '#checklog-table-pager',
{ add: true, edit: false, del: false },
{},
{
caption: 'Add',
recreateForm: true,
mtype: "post",
width: 520,
addCaption: "Add Check",
reloadAfterSubmit: true,
closeAfterAdd: true,
bSubmit: "Save",
onclickSubmit: beforeAdd,
afterSubmit: addComplete,
beforeShowForm: beforeShowAdd
},
{},
{ multipleSearch: true, overlay: false }
).navButtonAdd("#checklog-table-pager", {
caption: 'Export',
title: 'Export to Excel',
buttonicon: 'ui-icon-extlink',
onClickButton: function () {
var fileName = 'checklog_for_center_' + center_id + '.xls';
var dataUrl = 'PaymentService/GetCheckLog';
var searchParameters = getCheckLogIds();
$("#checklog-table").jqGrid('excelExport', { url: '/Spreadsheet/Index?fileName=' + fileName + '&dataUrl=' + dataUrl + '&filter=' + searchParameters });
}
});
$("#checklog-table-pager table.navtable tbody tr").append(
'<td><div><input type="checkbox" class="searchClosedBox" id="navSearchClosedBox"/>NLO Deal</div></td>');
$(".searchClosedBox").change(function () {
if ($(this).is(':checked')) {
search_closed = true;
var acc_list = getAccountDBAOnCenter($("#center_id").val());
dba_select_list_json = acc_list;
dba_list = acc_list;
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
}
else {
search_closed = false;
var acc_list = getAccountDBAOnCenter($("#center_id").val());
dba_select_list_json = acc_list;
dba_list = acc_list;
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
}
})
Upvotes: 0
Views: 1754
Answers (1)
Dietrich George
Reputation: 114
//Set the current row to false
grid.editRow(current_row_id, false);
// Set the new row to editable
grid.editRow(new_row_id, true);
.. or on everytime you select a row, you can add a flag. and then disable all rows with that flag when you click.
$cur_row.on("click", function(){
// Select all rows's with that flag, disable them and remove flag.
// Add Flag Class to this
// Then enable this one only.
}
Upvotes: 1
Related Questions
- Disable a row in jQGrid
- jqGrid: disable edit and delete buttons inLine edit mode
- Disable edit(add, edit and delete) buttons of jqgrid instead of hiding(default behaviour)
- How to disable editing for some cells in row editing of JQGrid?
- JQGrid: Dynamically set a cell to uneditable based on content
- jqGrid : Need to make a field nonEditable in Edit Window and editable in Add Window
- How to cancel jqGrid cell edit operation
- Cancel inline row editing manually?
- jqGrid update field "editable:false"
- jqGrid, disabled edited row