CODEWITHSUNDEEP
jqueryjqgrid
Fragsworth
Fragsworth

Reputation: 35497

jqGrid - how to have hidden fields in an edit form

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?

Upvotes: 3

Views: 22427

Answers (7)

Mehdi Souregi
Mehdi Souregi

Reputation: 3265

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'}},
]

Upvotes: 1

Bagus Putra
Bagus Putra

Reputation: 11

try this:

colModel: [
    { name: 'your_field_name', editable: true, hidden: true, search:false, editoptions: {style:'display:none;'}},
]

Upvotes: 0

Kinetic
Kinetic

Reputation: 740

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.

Upvotes: 8

pphillips001
pphillips001

Reputation: 435

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

Upvotes: 0

marc bertaud
marc bertaud

Reputation: 21

Try this:

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

Upvotes: 0

Steve
Steve

Reputation: 26124

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

Upvotes: 2

cmptrgeekken
cmptrgeekken

Reputation: 8092

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

Upvotes: 5

Related Questions