jqGrid - how to have hidden fields in an edit form

Question

I want to be able to pass fields into the edit form when a user attempts to edit a row, but I don't want these fields to be editable - I want them to just be hidden so they still get sent to the server.

For instance:

colModel :[
    {label: 'Game ID', name: 'game_id', editable:true},
    {label: 'Component ID', name: 'component_id', editable:true},
    {label: 'Table ID', name: 'table_id', editable:true},
],

This will pass them to the edit form (because of editable:true) but unfortunately they will be editable by the user. I want to hide these fields so the user can't edit them.

How can I do this?

Answer 1

i think a cleaner way is onclickSubmit event - you can add extra fields to be submitted.

var gr = jQuery("#table").jqGrid('getGridParam', 'selrow');
var row = jQuery("#table").getRowData(gr);

return { Id: row.Id };

Answer 2

EDIT

Okay, turns out you can define a custom element as an edittype. For your situation, you'd do the following:

colModel :[
    {label: 'Game ID', name: 'game_id', editable:true, edittype:'custom',editoptions:{custom_element:myelem,custom_value:myval}},
    {label: 'Component ID', name: 'component_id', editable:true, edittype:'custom',editoptions:{custom_element:myelem,custom_value:myval} },
    {label: 'Table ID', name: 'table_id', editable:true, edittype:'custom',editoptions:{custom_element:myelem,custom_value:myval}}
]

Then you'd define myelem and myval like so:

function myelem(value,options){
   return $('<input type="text" value="'+value+'" disabled="disabled"/>');
}

function myval(elem){
    return elem.val();
}

This will construct a disabled text field, and seems less hack-ish than afterShowForm.

ORIGINAL

If you're using an edit form control (not inline editing), it looks like you have to provide an afterShowForm function (scroll down to the Events section). See this question.

It looks like you want the columns to show up in the view, but not be editable. If you set editable:true, then the user can edit the field no matter what. What you'll end up having to do is disable / set the form element to hidden so the user can't change it's value. afterShowForm would then look something like:

afterShowForm: function(eparams){
    // change the selector appropriately
    $('#jqGrid input[name=game_id]').attr('type','hidden');
   // or $('#jqGrid input[name=game_id]').attr('disabled','disabled');
}

Answer 3

If it's info to pass to your edit database functions, you could just pass the additional parameters through the URL

editurl:"database_edit.asp?user_id="+user_id

Not necessarily a better way - just a different one.

Cheers

Paul

Answer 4

This is now supported within jqGrid via the edithidden attribute:

colModel: [
    { name: 'optionValue', key: true, index: 'optionValue', width: 55, editable: true,     hidden: true, editrules: { edithidden: false } },

Set to false to hide it in the add/edit form.

Answer 5

Try this:

beforeShowForm: function (formid)
{
    $("#tr_name",formid).hide(); 
},

Answer 6

If you can trust the end user, you can simply add the editoptions attribute and set the disabled parameter to disabled like this :

colModel: [
    { name: 'your_field_name', editable: true, hidden: true, search:false, editoptions: {'disabled':'disabled'}},
]