Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge.
One potential solution involves specifying a style:
.jqgrid-readonlycolumn {
background-color: #FFFFDD;
}
This style is then used in the colmodel editoptions:
editable: getReadOnlyEditable,
editoptions: { "readonly" : "readonly" , "class" : "grid-decimal-edit jqgrid-readonlycolumn" }
function getReadOnlyEditable(options) {
if (options.mode === "cell" || options.mode === "add" || options.mode === "edit") {
return false;
}
// form editing
return "readonly";
}
The jqgrid adds these classes as the first classes:
<td class="DataTD">
<input type="text" readonly=""
class="grid-decimal-edit jqgrid-readonlycolumn FormElement
ui-widget-content ui-corner-all"
disabled="disabled"
id="Varadokumn" name="Varadokumn" role="textbox"></td>
However, the ui-widget-content class appearing after overrides the background color to white.
An attempted fix involved adding the following style:
body .DataTD .jqgrid-readonlycolumn {background-color: #FFFFDD !important;}
Unfortunately, the background color still appeared as white. Further troubleshooting may be necessary.