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"]}}
}]

Oleg · Accepted Answer · 2015-10-10T19:00:42.637

31

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".

edited Oct 10 '15 at 19:00

answered Aug 14 '11 at 16:32

Oleg

220,925
34
403
798

1

I want to readonly username field only in edit mode. How can i do it? b/c when i apply this changes in username then in add mode readonly is enable due to which i cannot able to add new username. Plz suggest. – Siddiqui Sep 08 '11 at 09:31
1

@farhan: If you use [the inline editing mode](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing) look at [here](http://stackoverflow.com/questions/4307147/jqgrid-how-to-make-a-column-editable-in-the-add-dialog-but-not-during-inline-e/4308172#4308172). If you use [form editing](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing) read [another answer](http://stackoverflow.com/questions/3405029/jqgrid-disable-form-fields-when-editing/3405961#3405961). Both answers shows how you can **dynamically** change `editable` or any other properties of the column for the row. – Oleg Sep 08 '11 at 10:31
Thankx, it fixed. I've another issue. Please see the link http://stackoverflow.com/questions/7346722/how-to-display-error-message-in-add-edit-dialogue-of-jqgrid-while-checking-duplic , i shall be thankful to you for looking this issue as i'm stuck. – Siddiqui Sep 08 '11 at 10:47
@CJRamki: You are welcome! In some cases `editoptions: { disabled: "disabled" }` is even better. One can set **any** attribute on the editable filed (`` in the most case). Just if the name of the property of `editoptions` is unknown it will be interpreted by jqGrid as the name of additional attribute which need be set. – Oleg Jul 30 '14 at 08:20
Hmmm... like `required:true` option? @Oleg – CJ Ramki Jul 30 '14 at 09:13
@Oleg: Was confused why i'm getting the text cursor on hovering the read only field? Thinking that was editable tried many changes. – A Coder Sep 08 '14 at 09:25

score 3 · Answer 2 · answered Oct 19 '11 at 05:27

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

score 1 · Answer 3 · edited Jul 30 '14 at 07:26

1

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

edited Jul 30 '14 at 07:26

CJ Ramki

2,620
3
25
47

answered Nov 14 '12 at 16:56

Nitin Chhabra

109
2
8

1

Yeah. That would be a copy, really, if not verbatim. – J. Steen Jan 11 '13 at 22:46

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

3 Answers3

Linked