Read editable input values in jqgrid

Question

I have the following inline editable grid

 var lastsel;
$("#mygrid").jqGrid({
        data:JqgridResponse.rows,
        datatype: "local",
        colNames:['DATE', 'SOURCE', 'DEST', 'FROM', 'TO'],
        colModel:[   
                  //1140 width
            {name:'time', index:'time', width:170 ,sortable:false},
            {name:'source', index:'source', width:290,sortable:false,editable:true,editoptions:{size:"33",maxlength:"50"}},
            {name:'dest', index:'dest',  width:290,sortable:false,editable:true,editoptions:{size:"33",maxlength:"50"}},
            {name:'from', index:'from', width:170,sortable:false,editable:true, edittype:"select",editoptions:{value:"us:US;gb:GB;fr:FR"}},
            {name:'to', index:'to', width:170,sortable:false,editable:true, edittype:"select",editoptions:{value:"us:US;gb:GB;fr:FR"}}
        ],
        multiselect: true,
            rownumbers: false,
        rowNum:10,                                      
        rowList:[10,50,100],                            
        height: "100%",
        autowidth: true,
        pager: '#pager',                                
            viewrecords: true,                              
            sortorder: "desc",
            ondblClickRow: function(id) {           
                if(id && id!==lastsel){
                jQuery('#mygrid').jqGrid('restoreRow',lastsel);
                jQuery('#mygrid').jqGrid('editRow',id,true);
                lastsel=id;
            }
            }

    });

And a navigation button and its event

$("#mygrid").navButtonAdd('#pager',
        {   caption:"", 
            buttonicon:"ui-icon-disk", 
            onClickButton: updateLocations,
            title:"Update Locations", 
            cursor: "pointer"
        } 
);

function updateLocations(obj, args){
    //how to get the edited data source, dest, from, to ?
}

How could I get the edited input value of "source" and "dest", and selected value of "from" and "to" at updateLocations method?

I have tried to located the edited row at Firebug, but the input has no values at all! For example for the "source"

<td aria-describedby="mygrid_source" title="N-finger" style="" role="gridcell">
<input id="36_source" class="editable" type="text" size="33" maxlength="50" name="sourcespan" role="textbox">
</td>

Am i missing something? Thanks.

Justin Ethier Justin Ethier · Accepted Answer · 2012-08-28T13:41:26

You should use saveRow to save any edits; calling restoreRow will only revert the row back to it's previous values.

I do not believe there is a method that will only get your changes, but you could keep track of all of the changed rows using an array with top-level scope. Then you would need to modify ondblClickRow to use that array to keep track of each row ID that has been modified. Then in updateLocations you can use getRowData to get the data for each of these rows, and (for example) save it via a POST to the server.

Read editable input values in jqgrid

1 Answers