jqGrid - edit only certain rows for an editable column

Question

Is it possible to disable editing in jqGrid 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?

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);
            lastSel = id;
        }
    },
    pager: '#pager'
}).jqGrid('navGrid','#pager',{edit:false});

Answer 2

You can do it logically. You must have some criteria for cells that some cells can be editable and some are not.

I have implemented it row wise.

When you create XML for jqgrid, give some id to each row.

Based on these ids you can make those rows' cells editable or noneditable using jqgrid methods.

Below is beforeEditCell method:

beforeEditCell: function(rowid, cellname, value, iRow, iCol) {
   // here identify row based on rowid
   // if the row should not be editable than simply make the cells noneditable using
   editCell(iRow, iCol, false);
   jQuery(gridid).jqGrid("restoreCell",iRow,iCol);

}

You can further implement yourself.

Hope my suggestion would help you. :)