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;
}