jqGrid - inline edit and trapping edit rules

Question

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.

Answer 1

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.

Answer 2

After playing for awhile, I decided edit rules dont work so well with inLine Editing. 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;}
                            }  

Answer 3

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...