Search code examples
javascriptjqgrid

jqGrid setCell function 5th parameter and edit mode


I have a jqGrid where I want all the rows to be in edit mode. Under certain conditions, however, I want a cell in that row to be readonly based on some condition of the row data, but I can't seem to get the grid to bend to my will (yet).

This is what I currently have.

$(grid).addRowData(...);  // omitted for clarity
$(grid).jqGrid('editRow',rowid);
if (someCondition){
     $(grid).setCell(rowid, 'col1', '', '', {editable: false});
}

The row is added and put into edit mode just as I want, but when it gets to the call to setCell(), it doesn't seem to affect the cell.

Any ideas what I'm doing wrong here?


Solution

  • The grid was already using column formatters for other columns so I decided to go that route. I couldn't get it to not change the entire column to readonly/editable using the method described by Oleg. I also decided to store readonly state as part of the grid cell value.

    colModel:

    { name: 'ARNumber', width: 70, editable: false, sortable: false, formatter: 'optionalReadonlyInputCellFormatter'},
    

    setup of my formatter/unformatter:

    $.extend($.fn.fmatter, {
        optionalReadonlyInputCellFormatter: formatOptionalReadonlyInputCell
    });
    
    $.extend($.fn.fmatter.optionalReadonlyInputCellFormatter, {
        unformat: unformatOptionalReadonlyInputCell
    });
    

    formatter/unformatter functions:

    function formatOptionalReadonlyInputCell(cellvalue, options, rowdata) {
        var readonly = cellvalue === undefined;
        if (readonly)
            return displayARNumberInput('');
    
        vals = cellvalue.split(",");
        var cellValue = vals[0];
        var readonly = !(vals[1] === undefined) || vals[1] == 1;
    
        if (readonly) {
            return displayARNumberSpan(cellValue);
        }
        else {
           return displayARNumberInput(cellValue);
        }
    }
    
    function unformatOptionalReadonlyInputCell(cellvalue, options, cellobject) {
        var readonly = (cellvalue == "") ? "0" : "1";
        if (readonly == "1") {
            return cellvalue + "," + readonly;
        }
        else {
            return $(cellobject).children().val() + "," + readonly;
        }
    }
    
    function displayARNumberInput(value) {
        var element = document.createElement("input");
        element.type = "text";
        element.value = value;
        return element.outerHTML;
    }
    
    function displayARNumberSpan(value) {
        var element = document.createElement("span");
        element.innerText = value;
        return element.outerHTML;
    }