jqGrid: How to grey out read only fields on add/ed

Question

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

Answer 1

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:

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