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.

---

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;}
                            }  

Drank

Answer 1

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

Hagler

Answer 2

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.

Compound

Thanks,Justin. I have tried to move along that path but not sure how to get the data from the row. I tried jQuery("#rowid_myCol").Val() to get the value of my Value but that is not working. How to I get the value of Value so I can test it. --DW – Drank

OK, you actually need to call saveRow() first so you can properly access the row data. I should clarify that above. Then you can use getRowData() to get data for the row. Does that help? – Compound

If I call saveRow() if fails the editrule and does not get saved. I think I was close. I believe I need to use jQuery(#lastSel_myCol").val(). I was hitting the wrong row. If I get it right I will post it. – Drank

@ Justin Ethier: what is clientArray? and how to can access to data clientArray??? thanks – Ultramarine

According to the jqGrid docs: url: if defined, this parameter replaces the editurl parameter from the options array. If set to 'clientArray', the data is not posted to the server but rather is saved only to the grid (presumably for later manual saving).. So it does not save to another array or anything - you need to keep track of the changes client-side if you want to submit them later. It just prevents the grid from automatically posting them. – Compound

@JustinEthier : thanks, i was looking for this solution only. – Cerement

@DW try this to get cell value: var rowData = jQuery(this).getRowData(rowid); var value = rowData['colname']; – Calque

Answer 3

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.

Nephritic

Answer 4

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);
}

Solve

Answer 5

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 }

modify code:

        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
    }

Miscellany