Jquery – jqGrid: disable edit and delete buttons inLine edit mode

jqgridjquery

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 the not-editable-row class. Just replace #gridName with your grid's id:

if (rowid != row.id) {
    $(row).addClass('not-editable-row');
    var v = myGrid.jqGrid('getCell', row, 'act');

    // hide the edit/delete buttons on non-editable rows (not the row we are editing)
    $("#gridName tr#" + row.id + " .ui-inline-edit").hide();
    $("#gridName tr#" + row.id + " .ui-inline-del").hide();
}
else {
    // show the edit/delete buttons for the current row
    $("#gridName tr#" + row.id + " .ui-inline-edit").show();
    $("#gridName tr#" + row.id + " .ui-inline-del").show();
}

Does this help?

Related Topic