jqgrid: Add row

Question

I am developing a web application using JSP & Servlet (IDE: Eclipse, Database: Oracle10).

I am using JQGRID to display data in tabular format. I also want functionality of Add, Edit, Delete in JQGRID. So far I have completed Edit,Delete Functionality.

Now I want Add functionality, the problem is that when I click on default Add button then it is showing me only DESCRIPTION field which is set editable:true and not showing other two fields which are not editable. I have not set them editable because they are primary keys, and I don't want them to be edited.

So my question is is there any way that I can set not editable columns to Editable after user clicks on Add.

Following is my source code:

jQuery("#list10_d2").jqGrid({
                height: "100%",
                url:'ProtocolJGridServChildStages?q=2&action=protStages',
                datatype: "xml",
                 colNames:['Sr. No.','PROTOCOL_ID',  'STAGE_ID',  'DESCRIPTION'],
                 colModel:[{name:'srNo',index:'srNo', width:35,sortable:true},
                           {name:'PROTOCOL_ID',index:'PROTOCOL_ID', width:100,sortable:false},
                           {name:'STAGE_ID',index:'STAGE_ID', width:100,sortable:false},
                           {name:'DESCRIPTION',index:'DESCRIPTION', width:150,sortable:false,editable:true}
                           ],
                rowNum:5,
                rowList:[2,4,10],
                pager: '#pager10_d2',
                sortname: 'PROTOCOL_ID',
                viewrecords: true,
                sortorder: "asc",
                multiselect: true,
                editurl: "ProtocolJGridServChildStages?action=protocolStageEdit",
                caption:"CRM_PROT_STAGES",
                onSelectRow: function(ids)
                {
                    if(ids && ids!==lastsel)
                    {               
                        var ret = jQuery("#list10_d2").jqGrid('getRowData',ids);
                        protID = ret.PROTOCOL_ID;
                        stageID = ret.STAGE_ID;

                        jQuery("#list10_d2").jqGrid('setGridParam',{editurl:'ProtocolJGridServChildStages?action=protocolStageEdit&protID='+protID+'&stageID='+stageID});
                        jQuery('#list10_d2').jqGrid('restoreRow',lastsel);
                        jQuery('#list10_d2').jqGrid('editRow',ids,true);
                        lastsel=ids;
                    }
                }
            }).navGrid('#pager10_d2',{add:true,edit:true,del:true},{width:400,height:200},{width:500,mtype:'POST', url: 'ProtocolJGridServChildStages', addData:{action:'protocolStageAdd',protID: function () {return protID;}, stageID: function(){return stageID;}}, closeOnSubmit: true},{mtype: 'POST',url: 'ProtocolJGridServChildStages',delData: {action: 'protocolStageDelete',protID: function () {return protID;}, stageID: function(){return stageID;}}});
            jQuery("#ms1").click( function() {
                var s;
                s = jQuery("#list10_d2").jqGrid('getGridParam','selarrrow');
                alert(s);
            }).navGrid('#page',{edit:true,add:true,del:true});

Thanks in advance...

Edit:

.navGrid('#pager10_d2',{add:true,edit:true,del:true},{width:400,height:200},{width:500,mtype:'POST', url: 'ProtocolJGridServChildStages',beforeShowForm: function(){var cm = $('#list10_d2').jqGrid('getColProp',"PROTOCOL_ID");  cm.editable=true; cm = $('#list10_d2').jqGrid('getColProp',"STAGE_ID");  cm.editable=true; alert("before");}, addData:{action:'protocolStageAdd',protID: function () {return protID;}, stageID: function(){return stageID;}}, closeOnSubmit: true},{mtype: 'POST',url: 'ProtocolJGridServChildStages',delData: {action: 'protocolStageDelete',protID: function () {return protID;}, stageID: function(){return stageID;}}});

EDIT

    }).navGrid('#pager10_d2',{add:true,edit:true,del:true},
                    {closeOnEscape:true, recreateForm: true, width:400,height:200},
                    {closeOnEscape:true, recreateForm: true, beforeShowForm: function(formId){var cm = $('#list10_d2').jqGrid('getColProp',"PROTOCOL_ID");  cm.editable=false; var cm2 = $('#list10_d2').jqGrid('getColProp',"STAGE_ID");  cm2.editable=true; alert("before");}, addData:{action:'protocolStageAdd',protID: function () {return protID;}, stageID: function(){return stageID;}},width:500,mtype:'POST', url: 'ProtocolJGridServChildStages',closeOnSubmit: true},
                    {closeOnEscape:true, recreateForm: true, mtype: 'POST',url: 'ProtocolJGridServChildStages',delData: {action: 'protocolStageDelete',protID: function () {return protID;}, stageID: function(){return stageID;}}});

score 1 · Answer 1 · edited Jan 08 '13 at 09:52

1

Use the following inside the click function

$("#list10_d2").jqGrid('setCell',rowid,cellname, '', {editable:true});

list10_d2.trigger("reloadGrid");

edited Jan 08 '13 at 09:52

kapex

28,903
6
107
121

answered Jan 08 '13 at 09:44

Kanagaraj M

956
8
18

Kris · Accepted Answer · 2013-01-10T10:18:15.510

1

Try this

In beforeShowForm event

add this code

var cm = $('#list10_d2').jqGrid('getColProp',"PROTOCOL_ID");

inside add option

  {   cm.editable=true;}

inside add option

 {cm.editable=false; }

edited Jan 10 '13 at 10:18

answered Jan 08 '13 at 09:55

Kris

1,882
1
20
23

I have edited code and added beforeShowForm event, but now problem is that i can edit columns from rows, but not from the `form`, and I want primary key columns to be editable when i click on add button on the navigation bar. any solution? – Bhushan Jan 09 '13 at 05:26
http://stackoverflow.com/questions/3405029/jqgrid-disable-form-fields-when-editing/3405961#3405961 – Kris Jan 09 '13 at 06:14
The solution in the above link hide the input box. There are some issues in your beforeShowForn 1. formId parameter is missing in function. 2. initially the inputs should be editable and 3. I think you need to add recreateForm: true – Kris Jan 09 '13 at 06:25
I have edited my code, I have solve 1 and 2, but when I add recreateForm: true as edited above, then it is making the changes in form, but the problem is that i have to open the form twice for changes – Bhushan Jan 09 '13 at 10:33
I think I am putting `recreateForm: true` at wrong place, any suggestion? – Bhushan Jan 09 '13 at 10:37
You are welcome but the answer is not perfect, instead of if condition it should be edit/add option – Kris Jan 10 '13 at 10:16

jqgrid: Add row

2 Answers2