jqGrid: How can I add columns to the edit modal that are read only?

Question

I want to add a couple of columns to the edit dialog that are read-only in order to show users which row of data they are editing. The selected row only gets highlighted very faintly so it's hard for users to tell which row of data they are editing. Is there a way to add columns to the edit modal and make them read-only?

Here's what I've tried but none of them work. Maybe there is some Javascript-ism that I don't have quite right, but I can't figure it out.

Has anyone been able to add columns to the edit modal that are read-only?

$("#prodTable").jqGrid('navGrid', '#pager', 
  { edit: true, add: false, del: false, search: false, refresh:true },
  { //  edit
    beforeInitData : function(formid) {
      console.log("beforeInitData formid: " + formid);
      //$("#" + "serialNumber").prop('readonly',true);
      //$("#prodTable_serialNumber").prop('readonly',true);
      //$("#prodTable_serialNumber").attr('readonly',true);
      //$("#jqgh_prodTable_serialNumber").attr('readonly',true);
      //$("#jqgh_prodTable_serialNumber").prop('readonly',true);
      $("#formid").prop('readonly',true);
    }
  }

you wrote "to add a couple of columns". Do you mean additional field in the dialog with the information from non-editable columns of the grid or you use `colpos` of [formoptions](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#formoptions) to create multicolumn edit form (like in [the answer](http://stackoverflow.com/a/10852741/315935))? — Oleg, Jan 28 '14 at 13:49
I mean additional non-editable fields in the dialog to remind the user which record he/she is editing. — Dean Schulze, Jan 28 '14 at 18:09

score 0 · Accepted Answer · edited May 23 '17 at 11:49

Form editing mode don't allows to insert non-editable fields in the editing dialog. It's one from the reason why usage of inline editing could provide more advantages. I like to use double-click to start inline editing. In the case the editable columns will be "converted" to controls like text <input>, dropdowns, checkboxes etc. If the user press Enter or "Save" button (depend on the form of inline editing which one use) the edited row will be saved.

If you still prefer usage of form editing then you can add required information about non-editable columns in at least two different ways. The first way would be adding properties

editable: true, editoptions: {disabled: "disabled"}

to non-editable columns. In the way the controls will be display, but disabled. To make look of the form better you can use additionally the approach which I described in the answer. You should just modify beforeShowForm callback from the answer to the following

beforeShowForm: function ($form) {
    $form.find(".FormElement[disabled]")
        .addClass("ui-state-disabled")
        .closest(".DataTD")
        .prev(".CaptionTD")
        .prop("disabled", true)
        .addClass("ui-state-disabled")
}

Another alternative to customize Add/Edit form: adding any required information manually. See the answer and this one for corresponding code examples and demos.

jqGrid: How can I add columns to the edit modal that are read only?

1 Answers1