Is there any way to hide a column in a jqGrid table, but have it show when the row is edited in the form editor modal dialog?
Source: Tips4all
Source: Tips4all
I am looking to create a system which on signup will create a subdomain on my website for the users account area.
I just want to expand on queen3's suggestion, applying the following does the trick:
ReplyDeleteeditoptions: { 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>
This feature is built into jqGrid.
ReplyDeletesetup 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 would hide the manager's salary in the grid view but would allow editing when the edit form was displayed.
You can use the following code to hide a table column..
ReplyDeleteJQuery("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 the document.ready(), and you can bind the showCol() code on the dialog's edit/click event.
This thread is pretty old I suppose, but in case anyone else stumbles across this question...
ReplyDeleteI had to grab a value from the selected row of a table, but I didn't want to show the column that row was from. I used hideCol, but had the same problem as Andy where it looked messy. To fix it (call it a hack) I just re-set the width of the grid.
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 it reset the column widths but excluded the hidden one, so they filled in the gap.
Try to use edithidden: true and also do
ReplyDeleteeditoptions: { dataInit: function(element) { $(element).attr("readonly", "readonly"); } }
Or see jqGrid wiki for custom editing, you can setup any input type, even label I think.