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

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 2

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

Answer 3

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