how to show readonly fields in edit form in jqgrid or other way to show whole text from readonly column

Question

jqGrid colModel contains read-only multi line column defined using properties below. Content line lenghts are greater than column width, text is to long so that tooltio does not show its whole content. It is not possible to see whole content.

I'm looking for a way allow user to see whole column content. For example, if edit form button is pressed, this column content should de displayeid in edit form as readonly textarea. However, readonly columns does not appear in edit form.

How to allow user to see whole column content ?

colModel: [{
"name":"LoggedLongText",
"editable":false,"width":539,
"classes":"jqgrid-readonlycolumn","fixed":true,
"hidden":false,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]}}
}]

Answer 1

Is the setting

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

probably what you need?

UPDATED: Free jqGrid supports more values for editable property starting with version 4.8. The wiki article described that editable can be function and it supports additionally three string values in case of using form editing: "hidden", "disabled" and "readonly".

Answer 2

To show readonly fields you might try using the "disabled:disabled" inside editoptions.

Yet another option is to use a custom element type that returns a span as below:

colModel: [ 
      ... 
      {name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
      ...
   ]
..
function myelem (value, options) {
  var el = document.createElement("span");
  $(el).val(value);    // be sure to escape special characters as necessary.
  return el;
}

function myvalue(elem, operation, value) {
// just reutrun null or empty string.
return "";
}

I prefer this over using "readonly:readonly", because the readonly option wraps an input control around the cell value, the input control still receives focus, which I think is misleading to the user. Using "disabled:disabled" keeps the input element from receiving better, which is slightly better, in terms of usability.

Using a span is much better. Interestingly, jqGrid sends even "unsuccessful" form controls to the server.

Hope this helps. -- jqr

Answer 3

To show readonly fields on EditForm, you must try using the {readonly: true} property inside editoptions for a jqGrid column and will work.