jqGrid - inline edit and trapping edit rules

In my situation, I need to allow users to edit various cells in the grid and then save the whole grid to the server later. I have pretty much solved this issue with inline editing and saving to ‘clientArray’. However, I am trying to use the editRules and have run into some issues.

If I make a column editable, and use edit rules to require it to be a number

{ name: 'Value', index: 'Value', width: 50, sortable: true,edittype: 'text',
                 editable: true, editoptions: { maxlength: 10 },
                 editrules:{number: true},
                 formatter:currencyFmatter, unformat:unformatCurrency },

and I control editing and saving in the onSelectRow event:

onSelectRow: function(id){
    if(id && id!==lastSel){
        jQuery("#Groups").saveRow(lastSel,true,'clientArray');   
        jQuery("#Groups").editRow(id,true);
    }  
    lastSel=id
},

I then use a button click event to save the grid. Everything works great untill I put a non-numeric value into the Value cell then click on the row below it. It throw as warning box up and stop the save, but it does not stop me from changing rows. So I now have two rows open for editing. Is there a way to trap the editrule error so I can handle it before moving to the next row.

I have tried to use the functions with saveRow (succesfunc, aftersavefunc, errorfunc, afterrestorefunc), of which all say fire after data is saved to server, which does not appear to work for ‘clientArray’.

Basically, I need to find a way to validate the data in inline editing when saved to ‘clientArray’ and information, suggestions, and particularly, examples would be greatly appreciated.

Thanks.

After playing for awhile, I decided edit rules dont work so well with inLine Edit开发者_JAVA技巧ing. So, as you suggested, I made my own validation routine. The trick was figuring out how to get the value of the edited row.

The one thing I am trying to figure out now is how to get the focus to go back to the Value column. Back to the documentation!

              if(id && id!==lastSel){
                        //dont save if first click
                        if (lastSel != -1) {
                          //get val of Value to check
                          var chkval = jQuery("#"+lastSel+"_Value").val() ;
                          // verify it is a number

                          if (isNaN(chkval)) {//If not a number
            //Send Validation message here

                                //Restore saved row
                                jQuery("#Grid").restoreRow(lastSel);
                                //Return to failed save row
                                jQuery("#Grid ").setSelection(lastSel,false);
                                //reopen for editing
                               jQuery("#Grid ").editRow(lastSel,true);
                                //Note - dont reset lastSel as you want to stay here }
                          else {
                             // If number is good, proceed to save and edit next
                                jQuery("#Grid ").jqGrid('saveRow',lastSel, checksave, 'clientArray', {}, null, myerrorfunc);        
                                jQuery("#Grid ").editRow(id,true);
                                lastSel=id;
                                };
                            isDirty = true;
                            };
                        else {
                            //first click - open row for editing
                            alert("new Edit")
                            jQuery("#Grid ").editRow(id,true); 
                            lastSel=id;}
                            }  

in order to resolve this, I used the plugin jquery.limitkeypress.min.js.

onSelectRow: function(id){
                if(id && id!==lastsel){
                    jQuery('#treegrid').jqGrid('restoreRow',lastsel);
                    jQuery('#treegrid').jqGrid('editRow',id, true);
                    $("input[name=Presupuesto]").limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
                    lastsel=id;
                }
            }  

where, "Presupuesto" is the name of the column where I let input data to the user.

It works very good...

To take care of this you can code up your own validation function, myRowIsValid in the example below. Then, just call this function as part of your onSelectRow event handler:

onSelectRow: function(id){
  if(id && id!==lastSel){

    if (lastSel != null && !myRowIsValid(lastSel) ) {
        // Display validation error somehow
        return;
    }

    jQuery("#Groups").saveRow(lastSel,true,'clientArray');
    jQuery("#Groups").editRow(id,true);
  }  
  lastSel=id
},

Basically, if the validation fails, then let the user know and do not edit the next row.

I made an array called edit_list, and in the callback oneditfunc I add the rowid to the list, and on aftersavefunc I remove it from the list.

That way you can examine the edit_list in the callbacks to determine if there is a row being edited.

This solution probably did not exist when the OP first asked, but this is how I solved it using the latest jqGrid (4.4.4).

I take advantage of the fact that the saveRow will return true/false on success.

Hopefully this helps.

function StartEditing($grd, id) {
    var editparameters = {
        "keys": true,
        "url": 'clientArray'
    };
    $grd.jqGrid('editRow', id, editparameters);
    $grd[0].LastSel = id;
}

onSelectRow: function(id) {
    var $grd = $(this);
    if (id && !isNaN($grd[0].LastSel) && id !== $grd[0].LastSel) {
        if ($grd.jqGrid('saveRow', $grd[0].LastSel, { "url": 'clientArray' }))
            StartEditing($grd, id);
        else
            $grd.jqGrid('setSelection', $grd[0].LastSel);
    }
    else
        StartEditing($grd, id);
}

To trap edit rules on saveRow event,you can use the inbuilt return type of 'saveRow' .Please mark as answer if you are looking for this yourcode: onSelectRow: function(id){ if(id && id!==lastSel){ jQuery("#Groups").saveRow(lastSel,true,'clientArray');
jQuery("#Groups").editRow(id,true); }
lastSel=id }

        onSelectRow: function(id){
        if(id && id!==lastSel){
           var bool = jQuery("#Groups").saveRow(lastSel,true,'clientArray');

          //bool true -->success,false -->invalid row /req field validations 

        if(bool)
        {
            //Returns true on sucessful save of record i.e to grid (when using client array)
            //and set current selected row to edit mode
            jQuery("#Groups").editRow(id,true);
        }
        else
        {
            //Set last selected row in edit mode and add required values
            jQuery("#Groups").editRow(lastSel,true);
        }

    }
     lastSel=id
    }