2

I am using jqGrid to maintain a database and need to have certain fields read only on the add/edit form dialog box. I see that jqGrid supports read only fields under editoptions but is it possible to some how "grey-out" read only input boxes so there is a visual cue to let the user know that the field is read only and not editable?

Thanks in advance.

UPDATE Thank you for your fast reply Oleg! I tried what you posted but I'm getting a lot of code warnings in my IDE (Netbeans). Here is my code:

jQuery("#grid").jqGrid('navGrid','#grid_toppager', 
    {
         add:true,
         edit:true,
         view:true, 
         search:false, 
         del:false, 
         refresh:true
    },
    { // Edit form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         viewPagerButtons:false, //disables the arrows to next records
         topinfo:"Fields marked with (*) are required",
         resize:false,
         recreateForm: true,
         beforeShowForm: function ($form) {
             $form.find(".FormElement[readonly]")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
                  .closest(".DataTD")
                  .prev(".CaptionTD")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
    },  
    { // Add form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         topinfo:"Fields marked with (*) are required",
         resize:false,
         reloadAfterSubmit:true,
         closeAfterAdd: true
    },
    { // prmDel

    },

    { // prmSeach

    },

    { //prmView
         top:220,
         left:460
    }

); //jQuery("#grid").jqGrid('navGrid','#grid_toppager'

Also is it possible to change the grey to a slightly darker shade? I need the user to still be able to read it but see and understand the visual cue that it is uneditable. Thanks so much Oleg

klm10
  • 277
  • 1
  • 12
  • 24

1 Answers1

6

You can use beforeShowForm callback to set all readable fields of edit form.

The demo uses the following code

$("#grid").jqGrid("navGrid", "#pager", {},
    {
        recreateForm: true,
        beforeShowForm: function ($form) {
            $form.find(".FormElement[readonly]")
                .prop("disabled", true)
                .addClass("ui-state-disabled")
                .closest(".DataTD")
                .prev(".CaptionTD")
                .prop("disabled", true)
                .addClass("ui-state-disabled");
        },
         // Add dialog options
    },
    {recreateForm: true}
);

It "grey-out" all readonly filed of the Edit form:

enter image description here

You can use of cause no setting of disabled property on the the field and you can use another class as "ui-state-disabled" if you needed. I wanted mostly to show how to select all the fieled which you want to "grey-out".

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 1
    @klm10: Your code miss closing `}` at the end of `beforeShowForm` callback. So you have just a syntax error. Moreover it's better to add `;` at the end of the long statement inside of `beforeShowForm`. – Oleg Dec 10 '13 at 19:09
  • Thank you Oleg, sorry for the simple programming mistake. It does work now with my grid. I really appreciate your help! Is it possible to control the shade of grey that the code uses? I need it to be a darker shade of grey so that it's able to read but keeping that visual cue that it's uneditable. Thanks again for your help! – klm10 Dec 10 '13 at 19:34
  • 2
    @klm10: you are welcome! I used `ui-state-disabled` class which definition you can find [here](https://github.com/jquery/jquery-ui/blob/1.10.3/themes/base/jquery.ui.theme.css#L141-L147). It's based on `opacity: .35;` and `filter:Alpha(Opacity=35);`. You can defined you class and use it instead of `ui-state-disabled` inside of `beforeShowForm`. You need just change the value of `opacity`. – Oleg Dec 10 '13 at 19:59
  • Thank you!! Changing the opacity worked! I have another question in relation to the grey-ed out fields: `How do I get make a readonly field an editable field on the Add form?` The scenario: On the **Edit** form: have `unit_id, short_desc, long_desc` as readonly (grey). On the **Add** form have unit_id editable (for adding purposes) but keep the short_desc and long_desc readonly (grey). I found this code: `$("#unit_id",formid).attr("readonly","readonly");` but I can't seem to get it to work – klm10 Dec 10 '13 at 20:37
  • @klm10: You are welocome! There are many ways to do this. For example you can use `beforeInitData` callback of form editing (see [the answer](http://stackoverflow.com/a/10496456/315935)). Another way will be to set `readonly` attribute (or remove it) inside of `beforeShowForm` (see [the answer](http://stackoverflow.com/a/3952654/315935)). [One more answer](http://stackoverflow.com/a/16484180/315935) gets you tips how to detect Edit or Add dialog dynamically. By the way you can set [readOnly](http://www.w3schools.com/jsref/prop_text_readonly.asp) property or uses `jQuery.prop` instead of `attr` – Oleg Dec 10 '13 at 21:19
  • @Oleg, thanks very much for your answer. It save me a lot of time. But I do have a problem, for some reason, for my case, only the field name grayed , but not the value, do you have any idea why? – zhihong Sep 09 '15 at 16:02
  • @zhihong: You are welcome! About the problem with only the field name grayed, but not the value. You should post more details (JavaScript code) what you do. It could be very important to know which version of jqGrid you use. By the way I develop [free jqGrid](https://github.com/free-jqgrid/jqGrid) as the fork of jqGrid. It has new feature described in [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/editable-property-of-colModel-as-function). I recommend you to try free jqGrid. You will be able to use `editable: "disabled"` instead of `editable: true`. – Oleg Sep 09 '15 at 16:12