JqGrid: disable form fields when editing

I am currently developing a web application designed to administer vending machines, etc. I decided to use jQuery, jQuery UI and jqGrid for this project, so I can easily provide a great and customizable user interface.
Unfortunately, the jqGrid documentation is quite outdated and does not cover all the functions of this great plugin (because I really like it, although the documentation is pretty bad).

Anyway, enough background information, I suppose. Let me get to the point:
I use the navigation bar that is built into jqGrid to add, edit and remove elements from the grid.
For me, this works like a charm, except for one: some fields can be enabled (or visible) only when a new item is added, and not in edit mode (they must be hidden and / or disabled).

Example:
The company I work with sells vending machines and there are several types (different sizes, etc.) of these towers. when a new tower is added to the site and entered into the system, the type must be installed. But the tower does not magically change over time, so this field cannot be edited later.

Does anyone know if this behavior can be accomplished by changing some initialization parameters?
Perhaps this is an undocumented editoptions or formoptions?
Or maybe you have a simple solution for this?

I would love to hear your suggestions / solutions!
Thanks =)

+17
jquery editing jqgrid
Aug 04 '10 at 11:26
source share
5 answers

You can implement your requirements in different ways. For example, inside the beforeShowForm event beforeShowForm you can hide or show

 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 id "tr_Name" is constructed from the tr_ prefix and "Name" is the name property of the column from colModel .

UPDATED : in and in another , one of the more ways to change properties can be shown dynamically immediately after editing is initialized.

UPDATED 2 : Free jqGrid allows you to define editable as a callback function or as "disabled" , "hidden" or "readonly" . See the wiki article . This makes it easier to implement the same requirements.

+36
Aug 04 '10 at 13:28
source share

To make the field editable or not, this is what I completed the encoding after searching for an answer for a while (to disable editing in the line editor, but allow it to โ€œAddโ€) and not find the answer I need:

 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}); }, 
+8
Dec 12 '11 at 15:25
source share

Here is an example:

http://www.ok-soft-gmbh.com/jqGrid/CustomFormEdit.htm

  beforeShowForm: function(form) { $('#tr_Name', form).hide(); } 
0
Oct 23 '12 at 13:35
source share

Visible but not editable:

 { // edit option beforeShowForm: function(form) { $('#col_name', form).attr("disabled", true); } } 
0
Apr 3 '16 at 4:40
source share

This will work with free jqgrid, simple and simple:

This specific example will allow editing only in the "add" form:

 editable: function (options) { // Allow edit only for "add" not for "edit" if (options.mode === "addForm") { return true; } else if (options.mode === "editForm") { return false; } else { return false; } 
0
Mar 07 '17 at 16:45
source share



All Articles