Hi to all i'm working on jqGrid and i have a little problem trying to customize in line edit.
I would like, when a user is in editing mode on a row, disable the edit and delete buttons on the others rows.
Here's a link to show similar situation (https://stackoverflow.com/questions/20116442/jqgrid-how-to-customize-inline-actions-buttons)!
This is the code i'm using to disable other rows applying the class 'not-editable-row' on the rows not selected and it works fine, but the problem is that buttons are still active and the user can click over them (and in this way also the buttons on the row change!). No action is performed but i want to know if there is a way to avoid this behavior. emphasized text
.....
autowidth: true,
colNames: ["Options","Dec Id","Address1", "Address2","Rule","Action", "Subddress1", "Subddress2", "Recode","Maybereason","Maybeid"],
colModel: [
{name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
formatoptions:{
editbutton:true,
delbutton:true,
restoreAfterError:false,
keys: false, // true if we want use [Enter] key to save the row and [Esc] to cancel editing.
onEdit:function(rowid) {
$('#decisionGridPager').hide();
var myGrid =$("#decisionGrid");
var grid = $('#decisionGrid')[0], rows = grid.rows,cRows = rows.length, iRow, row, trClasses;
for (iRow = 0; iRow < cRows; iRow++) {
row = rows[iRow]; // row.id is the rowid
//alert(row.id);
if(rowid!=row.id){
$(row).addClass('not-editable-row');
var v = myGrid.jqGrid ('getCell', row, 'act');
}//else{alert("current row");}
}
},
onSuccess:function(jqXHR) {
return true;
},
onError:function(rowid, jqXHR, textStatus) {
if(jqXHR.responseText !== ''){
alert(textStatus+": "+jqXHR.responseText);
}
},
afterSave:function(rowid) {
$('#decisionGridPager').show();
alert("record saved");
},
afterRestore:function(rowid) {
$('#decisionGridPager').show();
return false;
}
}},
{name: "id", width: 20, hidden:true},
{name: "address1",required:true,editable:true,edittype:'text',index:"address1",sortable:true,
editoptions: {dataInit:vcode,size:10, maxlength: 6}, width: 20, editrules:{required:true}},
{name: "address2", editable:true, width: 20, align: "right",editoptions: {dataInit:vcode,size:10, maxlength: 6}},
//dataUrl:'/wacm/rulesrv?client=true' or dataUrl:'/wacm/rulesrv'
…….
To avoid further interactions while the user work on a row the pager is hided for example and then showed again in the afterSave function, while if occur any problem on server side and onError function is executed the user is forced to solve the problem before continue. My target is force the user to work on a single row at a time. Thanks a lot any advice will be appreciate.
Best Answer
I modified your
if
statement where you add thenot-editable-row
class. Just replace#gridName
with your grid'sid
:Does this help?