9
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)

1
  • There's an easier way listed in another question on StackOverflow: here
    – J _
    Jan 31, 2011 at 21:54

4 Answers 4

13

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

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

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();
                      }
                  });
4
  • since the question is 2 years old, I was wondering: are there any up-to-date solutions to this? NB: JqSuite for PHP -
    – Jess Stone
    Feb 3, 2014 at 12:26
  • 2
    @JessStone: I don't use jqSuite myself, but I suppose all is the same as in jqGrid. On can use editrules: {edithidden: true}, but it's not pure option for View. It will be used for editing too. If you don't use editing and just want to display some hidden columns you can use editrules: {edithidden: true}.
    – Oleg
    Feb 3, 2014 at 12:56
  • Dear @Oleg, I found out I just have to use "editable" => false, since my goal is to show the column in table, and hide in the edit form. thanks anyway, you are a JqGrid GURU, I am voting up all your answers! ! :)
    – Jess Stone
    Feb 3, 2014 at 13:38
  • For unknown hidden columns, one can use : $('tr[id^="trv_"]', form[0]).show(); Jan 12, 2017 at 19:57
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>
1

To hide the grid column

jQuery("#GridId").jqGrid('hideCol','colName');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.