jqGrid - edit only certain rows for an editable column

Question

Hi,

Another jqGrid question: Is it possible to disable editing for certain cells in a column that is marked as editable?

From what I've seen, the only options are "all cells are editable" or "no cells are editable". Is there a way to work around this?

Thanks, Cosmin

Answer 1

I'll recommend you to use so named "Inline Editing" for row editing. The most advantage of this method, that it is very intuitive and the user. You can see how it works on the demo page http://trirand.com/blog/jqgrid/jqgrid.html. Choose on this demo "Row Editing" and then "Using Events" or "Input types" on the left tree part. With this method you can implement any custom verification whether the selected row should be allowed to be edited or not inside of the event handle onSelectRow or ondblClickRow. If you allow editing, then you call editRow method of jqGrid. This method creates input controls for all editable columns and the user can modify the row values in a natural way. The modifications will be saved if the user press "enter" key or canceled on "esc" key.

I personally prefer to implement calling of editRow method inside of ondblClickRow event handler. So the user can continue selecting of rows like usual and can use double click for the row editing. The pseudo code will look like folowing:

var lastSel = -1;
var isRowEditable = function (id) {
    // implement your criteria here 
    return true;
};
var grid = jQuery('#list').jqGrid({
    // ...
    ondblClickRow: function(id, ri, ci) {
        if (isRowEditable(id)) {
            // edit the row and save it on press "enter" key
            grid.jqGrid('editRow',id,true);
        }
    },
    onSelectRow: function(id) {
        if (id && id !== lastSel) {
           // cancel editing of the previous selected row if it was in editing state.
           // jqGrid hold intern savedRow array inside of jqGrid object,
           // so it is safe to call restoreRow method with any id parameter
           // if jqGrid not in editing state
            grid.jqGrid('restoreRow',lastSel);
        }
    },
    pager: '#pager'
}).jqGrid('navGrid','#pager',{edit:false});