How to hide a jqgrid column dynamically

Question

I am implementing jqgrid in my asp.net MVC web application.

In my grid i have two columns edit and delete. The delete should be visible only if the user is logged as admin .

How can we dynamically hide.show columns in jqgrid. I am having a session variable to check whether the logged in user is Admin or not.

I am accessing that variable in javascript. but, not sure how can i hide/show column in jqgrid

Please help..

Vinoth Krishnan · Answer 1 · 2013-10-22T12:05:37.830

20

Use this code,

jQuery("#list").jqGrid('hideCol',["colModel1_name","colModel2_name"]);
jQuery("#list").jqGrid('showCol',["colModel1_name","colModel2_name"]);

May this help you.

edited Oct 22 '13 at 12:05

answered Oct 22 '13 at 11:56

Vinoth Krishnan

2,925
6
29
34

@Vinoth..what are colmodel1 and colmodel2? – Sai Avinash Oct 22 '13 at 12:01
Both are name in your colmodel definition which are the columns you want to hide. – Vinoth Krishnan Oct 22 '13 at 12:04
What if I need to hide the colModel in the add form dialog? I tried this in beforeShowForm but it did not work, – jstuardo Jan 04 '17 at 22:23
Check this [answer](http://stackoverflow.com/questions/9110352/how-to-hide-column-in-jqgrid-but-show-this-column-in-add-edit-panel#9110513) – Vinoth Krishnan Jan 05 '17 at 12:34

score 15 · Accepted Answer · answered Oct 22 '13 at 12:59

15

This one worked:

$("#list").hideCol("ColumnName")

answered Oct 22 '13 at 12:59

Sai Avinash

4,683
17
58
96

score 11 · Answer 3 · answered Jun 04 '14 at 23:26

11

Newer API

jQuery("#list").jqGrid('hideCol',["ColumnName","ColumnName2"]);

Older API

$("#list").hideCol("ColumnName")

answered Jun 04 '14 at 23:26

Mustafa

1,738
2
24
34

score 2 · Answer 4 · answered Nov 27 '13 at 10:50

2

This is not the best practice to use js to manage your security. You should not show this column on your server side!

answered Nov 27 '13 at 10:50

Suwer

260
3
10

I am calling that javascipt from server side based on session information. So , i guess i am dong it from server side itself. I think jqgrid is purely jquery plugin. i think there is no other way to do it rather than using jquery.. – Sai Avinash Nov 27 '13 at 13:21
I agree with @Suwer - I use the server to programmatically write out the column model. If the user doesn't have permissions, then, the delete column is never written out to their browser. It's not 'hidden' where they might discover it in the view-source.. it's simply not *there* – bkwdesign Mar 06 '15 at 14:39

Mark Carpenter Jr · Answer 5 · 2018-07-24T19:30:29.520

I had to dive into some legacy stuff today. One of the requirements was to conditionally set the visibility of some columns. There was a drop down on the page that set a category parameter in the where clause for the grid. Long story short, watching the change event of the drop down wasn't possible making most of the methods in the answers here invalid.

I was able to use a ternary in the hidden param to set the visibility.

{
    name: 'mfg',
    index: 'mfg',
    width: 150,
    sortable: true,
    hidden: $('#evCategory').val() == 'Calibration' ? false : true
},

And it simply evals to if the dropdown has a value of calibration hidden should be false, if calibration is not the value hidden should be true.

Might also be able to shorten it to;

!$('#evCategory').val() == 'Calibration' || true

Although I haven't tested that.

How to hide a jqgrid column dynamically

5 Answers5

Linked