jQgrid show hidden column in form view

Question

jQuery("#CustomerDetailsGrid").jqGrid({
    //ignore other properties
    colModel: [
    { name: 'AccountNumber', index: 'AccountNumber', hidden: true, viewable: true }
],
    viewrecords: true        
});

I need to hide the column "Account Number" in grid view but show it in the form view.(Not edit form)

Answer 1

The best way is only adding the editrules:{edithidden:true} option.

colModel: [{ name: 'AccountNumber', index: 'AccountNumber', hidden: true, viewable: true,editrules:{edithidden:true} }]

Answer 2

If the View dialog will be created it will be filled with the information about every column placed in the rows. The id of the row (the id of <tr> element) will be constructed from the prefix "trv_" and the name of the corresponding column. It it important to understand, that in the form it will be filled the information about all columns inclusive hidden columns, but <tr> elements for the hidden columns will be hidden (has style="display: none;"). So to make the information visible it is enough to call jQuery.show() function for the corresponding <tr> element.

I prepared the small demo which demonstrate this. In the demo id column are hidden, but I make the information visible inside of beforeShowForm and afterclickPgButtons event handler of the View options:

$("#list").jqGrid('navGrid','#pager',
                  {add:false,edit:false,del:false,view:true,search:false},
                  {}, // edit options
                  {}, // add options
                  {}, // del options
                  {}, // search options
                  {   // vew options
                      beforeShowForm: function(form) {
                          $("tr#trv_id",form[0]).show();
                      },
                      afterclickPgButtons: function(whichbutton, form, rowid) {
                          $("tr#trv_id",form[0]).show();
                      }
                  });

Answer 3

To follow-up J_'s suggestion, applying the following does the trick:

editoptions: { dataInit: function(element) { $(element).attr("readonly", "readonly"); } }

Scenario #1:

• Field must be visible in the grid
• Field must be visible in the form
• Field must be read-only

Solution:

colModel:[
   {name:'providerUserId',index:'providerUserId', width:100,editable:true, editrules:{required:true}, editoptions:{ dataInit: function(element) { jq(element).attr("readonly", "readonly"); } }},
],

The providerUserId is visible in the grid and visible when editing the form. But you cannot edit the contents.

---

Scenario #2:

• Field must not be visible in the grid
• Field must be visible in the form
• Field must be read-only

Solution:

colModel:[
    {name:'providerUserId',index:'providerUserId', width:100,editable:true, editrules:{required:true, edithidden:true}, hidden:true, editoptions:{ dataInit: function(element) { jq(element).attr("readonly", "readonly"); } }},
]

Notice in both instances I'm using jq to reference jquery, instead of the usual $. In my HTML I have the following script to modify the variable used by jQuery:

<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>