How to make saveRow function wait for editRow function in jqGrid

Question

Im trying to adapt jqGrid add function to my own purposes. I have navButton that I want to make a specific behavior:

1. When user click that button, new row, in edit mode appears on the grid.
2. When user type data, and click enter, then data is send to server.

Right now, my code looks like this:

 .navButtonAdd("#${pagerId}", {
                caption: "${resolveMessage('assign')}", 
                buttonicon: "ui-icon-add", 
                onClickButton: function() {
                 if (assignMode == false){
                    assignMode = true;
                    $('#${tableId}').jqGrid('addRowData', 0, {});
                    $('#${tableId}').jqGrid('editRow', 0);
                    $('#${tableId}').jqGrid('saveRow', 0, function(){ assignMode = false; }, "${assignURL}"); 
                 }
                },
                position:"last"
            })

My problem is that saveRow function is not waiting for the end of editRow. It send empty data to server after the button is clicked immediately. How to made saveRow to wait for typed data?

Answer 1

I recommend you to use inlineNav instead of re-implementing the same functionality yourself. For example, you current code, for example uses the same rowid 0 for every added row, which is very bad. Moreover you call editRow without any additional options and then call saveRow immediately after editRow which force saving the empty row with probably wrong data. Saving can fail during validation.

Moreover I'd recommend you to consider to use free jqGrid available for free under MIT or GNU GPLv2 licenses instead of usage commercial Guriddo jqGrid JS (see the prices here). I develop free jqGrid fork since the end of 2014 (short after the post) and have implemented really many fixes, improvements and new features described shortly in readmes to every published version, wiki articles and the answers on the steckoverflow which I posted at the time.