Hidden columns in jqGrid

Question

Is there a way to hide a column in a jqGrid table, but show it as read-only when the row is edited in a form text editor?

Answer 1

I just want to expand the queen3 sentence with the following trick:

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

Scenario # 1 :

• The field must be visible in the grid.
• The field must be visible in the form
• The field must be read-only.

Decision

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

ProviderUserId is displayed in the grid and is displayed when editing the form. But you cannot edit the content.

---

Scenario number 2 :

• The field should not be visible in the grid
• The field must be visible in the form
• The field must be read-only.

Decision

 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"); } } }, ] 

Note that in both cases, I use jq to reference jquery instead of the usual $. In my HTML, I have the following script to change the variable used by jQuery:

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

Answer 2

This feature is built into jqGrid.

configure your grid function as follows.

 $('#myGrid').jqGrid({ ... colNames: ['Manager', 'Name', 'HiddenSalary'], colModel: [ { name: 'Manager', editable: true }, { name: 'Price', editable: true }, { name: 'HiddenSalary', hidden: true , editable: true, editrules: {edithidden:true} } ], ... }; 

There are other editrules that can be applied, but this basic setup will hide the manager’s salary in a grid, but allow editing when the edit form is displayed.

Answer 3

You can use the following code to hide the table column.

 JQuery("tableName").hideCol("colName"); 

And you can use the following code to show it again.

 JQuery("tableName").showCol("colName"); 

For your question, you can call the hideCol () code on document.ready (), and you can bind the showCol () code in the edit / click event of the dialog.

Answer 4

This thread is pretty old, I suppose, but in case someone else comes across this question ... I had to grab the value from the selected row of the table, but I did not want to show the column that the row was from. I used hideCol, but had the same problem as Andy, where it looked messy. To fix this (call it hacking), I just reset the grid width.

 jQuery(document).ready(function() { jQuery("#ItemGrid").jqGrid({ ..., width: 700, ... }).hideCol('StoreId').setGridWidth(700) 

Since my row widths are automatic, when I reset the width of the table reset the width of the column, but hidden is excluded, so they filled the gap.

Answer 5

Try using edithidden: true as well as do

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

Or look at the jQGrid wiki for custom editing, you can customize any type of input, even a label, I think.

Answer 6

To hide a grid column

 jQuery("#validGrid").jqGrid('hideCol',str); 

Answer 7

This is a little old, this post. But this is my code to show / hide columns. I use the built-in function to display columns and just mark them.

Function displaying displayed columns / hidden columns. #jqGrid is the name of my grid, and columnChooser is the jqGrid column selector.

  function showHideColumns() { $('#jqGrid').jqGrid('columnChooser', { width: 250, dialog_opts: { modal: true, minWidth: 250, height: 300, show: 'blind', hide: 'explode', dividerLocation: 0.5 } });