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)

There's an easier way listed in another question on StackOverflow: [here](http://stackoverflow.com/questions/1661800/hidden-columns-in-jqgrid) — J _, Jan 31 '11 at 21:54

score 13 · Answer 1 · answered Jul 28 '11 at 13:05

13

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

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

answered Jul 28 '11 at 13:05

zbacsi

149
1
4

score 11 · Accepted Answer · answered Jan 10 '11 at 21:12

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();
                      }
                  });

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 03 '14 at 12:26
@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 03 '14 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 03 '14 at 13:38
For unknown hidden columns, one can use : $('tr[id^="trv_"]', form[0]).show(); — Rabih Kodeih, Jan 12 '17 at 19:57

score 3 · Answer 3 · answered May 08 '11 at 07:40

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>

score 1 · Answer 4 · edited Dec 27 '13 at 13:04

1

To hide the grid column

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

edited Dec 27 '13 at 13:04

Gowri

16,587
26
100
160

answered Dec 14 '12 at 09:02

softmage99

797
1
8
15

jQgrid show hidden column in form view

4 Answers4

Linked