Finalizing editing in jqgrid

Question

I using jqgrid with great succes in the following way:

1. The data is loaded from the server as JSON
2. The user do inline editing

3. When a save-button is clicked all the data is serialized using:

   var data = $("#mygrid").getRowData();

   var datajson = JSON.stringify(data);

The problem with this aproach is that I will get the input elements in my json-data if the user has not pressed return or moved away from the edited cell. Is there any way to end edit mode i jqgrid?

Karnak

Answer 1

You can use saveRow to save the data.

To use saveRow you have to know the row id of the current editable row. You can for example save the rowid of the current editing in a variable (before you call editRow) and use the value for calling of the saveRow method.

UPDATED: see the demo. First select some row, modify the values and then click on the "Save current editing row" button. You will see that the changes will be saves.

Alpert

Sorry, that doesn't do it. saveRow calls the method to save the row, but the cell is still in edit mode. – Karnak

@Bebben: You made some error in your implementation. I added the demo which demonstrate that the usage of saveRow work. If you need save the data on the server instead of local saving, you should use other parameters of saveRow: read exactly the link of the saveRow which I posted you. – Alpert

Thank you Oleg! Works like a charm now! I think the problem was that I had my grid in celledit, and before I can call saveRow I must call cellEdit. Now I start of by setting all rows in edit mode, and before submit call saveRow on all the rows. Thanks! – Karnak

@HardikMishra: I'm glad to know this. You are welcome! I recommend you additionally to use keys: true option of inline editing. If you use new version of jQuery the usage of new jQuery.unload event could be also interesting. – Alpert

Answer 2

I have solved it by triggering "keydown" ENTER event on element:

editoptions: {
                    dataInit: function(elem) {
                        $(elem).datetimepicker({
                            dateFormat: "yy-mm-dd",
                            onClose: function(datetimeText, datepickerInstance) {
                                $(elem).trigger($.Event( "keydown", { keyCode: $.ui.keyCode.ENTER } ))
                            }
                        });
                    }
                }

Abernathy

Answer 3

I use remote submit for each cell, and as I used "contenteditable" div for cell editor (for multiline text), i wanted to finish cell editing with ctrl-enter.

( Based on Oleg's answer and How to close cell-editor? and http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing )

$(document).ready(function() {
    var grid,currentCell;
    $(".jqGrid_wrapper").on("keydown","div[contenteditable]",function (e) { 
        if (e.ctrlKey && e.keyCode == 13) 
        { 
            grid.jqGrid("saveCell",currentCell.iRow,currentCell.iCol);
            return false; 
        }

        return true; 
    });
    grid=$("#table_list_2");
    grid.jqGrid({
        url: ...
        cellEdit: true,
        cellsubmit: 'remote',
        cellurl: '..',    

        beforeEditCell: function(rowid, cellname, value, iRow, iCol) {
            currentCell={
                   rowid:rowid, cellname:cellname, value:value, iRow:iRow, iCol:iCol
            }
        }               
    });
});

Season