JQGrid: Dynamically set a cell to uneditable based on content

Question

I'm having some issues getting some cells (with cellEdit: true) to be non-editable even though the column is set to editable.

I've tried many ways, like beforeEditCell, formatters, etc. None seem to work.

The closest I've got is by setting a formatter to the column that I'd like to be editable and then using setCell to set the 'not-editable-cell' class (snippet below). The first time you click the cell, it unfortunately goes into edit mode, but if you click elsewhere and try to re-edit the cell, it's successfully uneditable.

I've also tried using the same snipped but inside of beforeEditCell, it successfully stops the cell from being edited but in turn 'freezes' the grid. You can no longer select any other cell.

function noEditFormatter(cellValue, options, rowObject) {
    if (cellValue == 'test')
        jQuery("#grid").jqGrid('setCell', options.rowId, 'ColName', '', 'not-editable-cell');
    return cellValue;
}

Any help would be much appreciated.

Answer 1

The idea to use setCell method to add class 'not-editable-cell' to the cells which should be not-editable is correct. You choose only the wrong place to do this. Inside of custom formatter, the grid can be not yet built till the end. I recommend you to use loadComplete or gridComplete to examine the grid contain of the current page and mark some cells as not-editable.

I prepared an example which demonstrate this. Like in your example all cells having "test" text are marked as non-editable. In the way you can examine one cells and mark another cells as non-editable.

Answer 2

var cellattr = function(rowId, tv, rawObject, cm, rdata) {
if(rawObject.locked) return ' class="not-editable-cell"';

};

In colModel: each column options add

{name: 'name',index: 'name', editable: true, width: 100, sortable: false, align: 'center', cellattr: cellattr}