CODEWITHSUNDEEP
javajspservletsjqgrid
Bhushan
Bhushan

Reputation: 6181

jqgrid: Add row

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

Upvotes: 0

Views: 1146

Answers (2)

Kris
Kris

Reputation: 1902

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

Upvotes: 1

Kanagaraj M
Kanagaraj M

Reputation: 966

Use the following inside the click function 

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

list10_d2.trigger("reloadGrid");

Upvotes: 1

Related Questions