jqGrid: Disable form fields when editing
Solution 1
You can implement your requirements in different ways. For example, inside of beforeShowForm
event you can hide or show the
jQuery("#list").jqGrid({
colModel: [
{ name: 'Name', width: 200, editable: true },
//...
}).jqGrid('navGrid','#pager', { edit: true, add: true, del: false},
{ // edit option
beforeShowForm: function(form) { $('#tr_Name', form).hide(); }
},
{ // add option
beforeShowForm: function(form) { $('#tr_Name', form).show(); }
});
where the id "tr_Name" is constructed from "tr_" prefix and "Name" - the name property of the column from the colModel
.
UPDATED: In the answer and in another one are shown one more way how the properties can be changed dynamically immediately before the editing will be initialized.
UPDATED 2: Free jqGrid allows to define editable
as callback function or as "disabled"
, "hidden"
or "readonly"
. See the wiki article. It allows to implement the same requirements more easy.
Solution 2
To make the field editable or not, this is what I wound up coding after searching for an answer for a while (to disable editing on in-row edit, but allow it on 'Add') and not finding the answer I needed:
colModel :[
{name:'id', index:'id', editable:false, ...
}).navGrid("#pager",{edit:false,add:true,del:false,search:false,refresh:true},
{}, // edit
{
beforeInitData: function(formid) {
$("#list").jqGrid('setColProp','id',{editable:true});
},
afterShowForm: function (formid) {
$("#list").jqGrid('setColProp','id',{editable:false});
},
Comments
-
Arno Moonen about 4 years
I'm currently developing a web application designed for the administration of vending machines and such. I decided to use jQuery, jQuery UI and jqGrid for this project, so I can easily provide a great and highly customizable user interface.
Unfortunately, the jqGrid documentation is pretty outdated and doesn't cover all the features of this great plug-in (cause I do really like it, even though the documentation is rather poor).Anyway, enough background information, I suppose. Let's get to the point:
I use the navbar which is built-in to jqGrid to Add, Edit and Delete items from the grid.
I've got this working like a charm, except for one thing: some fields may only be enabled (or visible) when adding a new item and not when in editing-mode (they should be hidden and/or disabled).Example:
The company I'm working for sells vending towers and there are several types (different sizes and stuff) of these towers. When a new tower is added to a location and entered into the system, the type must be set. But the tower doesn't magically change over time, so this field may not be edited later on.Does anyone know if this behavior can be accomplished by changing some initialization parameters?
Perhaps it's an undocumented edit-option (editoptions) or form-option (formoptions)?
Or maybe you've got a simple solution for this?I'd love to hear your suggestion / solutions!
Thanks =) -
Tareq almost 13 yearsThanks for the info. Additionally if you want to hide the column in the grid but show in add or edit form then use hidden: true in colModel and in beforeShowForm use show() method.
-
Cargo over 12 yearsThanks for the solution. I have a additional small question: the hidden field in edit modal form, is set required in add modal form, so at edit the client side validation tell me: Field is required.
-
Oleg over 12 years@Cargo: Sorry, but I can't understand your question. Could you ask the question in other words? Do you need to change the value of
required
property of theeditrules
? Inside ofbeforeShowForm
you should be able to do this. -
Cargo over 12 yearsHi Oleg, sorry for the unclear question. I have 2 fields: username and password. I wish in add new row form, both fields to be required and in edit form the password to not appear in form(to be hidden). The adding works fine but at edit the form requires to complete the password (the hidden field). Thanks a lot.
-
bombai over 11 yearsHi josemaria, can you tell me how can I add this aditional information label? Where Have i to put this code? Thanks.
-
CJ Ramki about 10 years@Oleg In
function(form) {
the parameterform
represents what? -
Oleg about 10 years@CJRamki: It's jQuery wrapper of the DOM element of the form which is inside of the editing dialog. The problem which could exist in jqGrid is the following: if you would create more as one grid on the same page and two grids will have columns with the same name
name: "Name"
then one could have id duplicates. If you opens editing dialog in first grid and close it the form having idstr_Name
andName
will be hidden, but still exist. If you try to edit row in the second grid then ` $('#tr_Name')` will find field in the first grid and the code$('#tr_Name').hide();
will not work. -
CJ Ramki about 10 years@Oleg thanks... Could you please take a look at this issue...stackoverflow.com/q/22813413/2567813. I referred most of your answers. But I could not get the correct solution for my issue.
-
Oleg about 10 years@CJRamki: I posted my answer on your question with the demo. The main changes are in the prefix of the row:
"tr_"
should be replaced to"trv_"
.