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.

Sheath

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.

Slayton

@Oleg: I want the complete jqgrid while loading itself with few cells in editable mode in each row. Is that possible. I cant find anything through search. Please help – Callus

@SaiKrishna: Sorry, but I don't understand what you mean. Could you explain all more detailed? – Slayton

@Oleg:Its like I've 5 rows coming from database, and all in each row I've field1 is select box with dropdowns, Field 2 is also a select box, field 3 and field 4 are text boxes respectively. Now when jqgrid loads. I want by default all these rows in editable mode i.e. field1, field2, field3 and field4 – Callus

@SaiKrishna: You probably mean "editing mode" instead of "editable mode". Do you want that all loaded rows are editing so that the user can change the values and press "Enter" to save the changed row? It's not the problem described in the answer to which you wrote comments. Nevertheless you can do this by calling editRow for all rows of the grid inside of loadComplete. – Slayton

AT LAST!! spent 4 hours trying to figure this out! Thanks Oleg – Kos

I'd like to note the important line of code here: grid.jqGrid('setCell',id,'name','','not-editable-cell'); – Escalera

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}

Sleave

Answer 3

I had to solve this now (2015) and found an approach that looks clean: specify a function for cellbeginedit that returns false if the cell is not allowed to be edited. Taken from the linked article and modified:

var checkIfRowIsValid = function (rowIndex) {
    //somehow get cellValue
    ...
    if (cellValue == 'test') return false;
}
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    editable: true,
    selectionmode: 'singlecell',
    columns: [
        { text: 'First Name', columntype: 'textbox', datafield: 'firstname',
        width: 90, cellbeginedit: checkIfRowIsValid},
        { text: 'Last Name', datafield: 'lastname', columntype: 'textbox',
        width: 90, cellbeginedit: checkIfRowIsValid}
    ]
});

Principal

This example is using jqxGrid. The OP is using jqGrid. – Lichter