Question

I am developing a web application using JSP & Servlet (IDE: Eclipse, Database: Oracle10). I am using jqGrid to display records in tabular format.

code snippet:

jQuery("#list10").jqGrid({
        url:'ProfileServ?action=profile',
        datatype: "xml",
        sortable: true,
        height: 250,
        width: 550,
        colNames:['Sr.No.','PROFILE_ID','PROFILE_NAME','TITLE','FIRST_NAME','MIDDLE_NAME','LAST_NAME'], 
        colModel:[{name:'srNo',index:'srNo', width:20,sortable:true, hidden:true},
                          {name:'PROFILE_ID',index:'PROFILE_ID', width:70,sortable:true,editable:true},
                          {name:'PROFILE_NAME',index:'PROFILE_NAME', width:150,sortable:true,editable:true},
                          {name:'TITLE',index:'TITLE', width:200,sortable:false,editable:true, hidden:true},
                          {name:'FIRST_NAME',index:'FIRST_NAME', width:200,sortable:false,editable:true, hidden:true},
                          {name:'MIDDLE_NAME',index:'MIDDLE_NAME', width:200,sortable:false,editable:true, hidden:true},
                          {name:'LAST_NAME',index:'LAST_NAME', width:200,sortable:false,editable:true, hidden:true}],
        rowNum:10,
        rowList:[10,20,50,100],
        pager: '#pager10',
        sortname: 'srNo',
        loadonce:true,
        ignoreCase: true,
        viewrecords: true,
        sortorder: "desc",
        multiselect: false,
        editurl: "ProfileServ?action=profileEdit",
        caption: "Profile",
        }).navGrid('#pager10',{edit:true,add:true,del:true,view:true},
            {modal:true,checkOnUpdate:true,closeOnEscape:true,width:500,closeOnSubmit: true,editurl:'ProfileServ?action=profileEdit',
                beforeShowForm: function(formid){alert('hiu');
                    cm = $('#list10').jqGrid('getColProp',"PROFILE_NAME"); cm.hidden=true;
                    cm = $('#list10').jqGrid('getColProp',"TITLE"); cm.hidden=false;
                    cm = $('#list10').jqGrid('getColProp',"FIRST_NAME"); cm.hidden=false;
                    cm = $('#list10').jqGrid('getColProp',"MIDDLE_NAME"); cm.hidden=false;
                    cm = $('#list10').jqGrid('getColProp',"LAST_NAME"); cm.hidden=false;},recreateForm: true},
            {modal:true,closeOnEscape:true,recreateForm: true,width:500,mtype:'POST', url: 'ProfileServ',editData:{action: 'profileAdd',profileID: function () {return profileID;}},
                beforeShowForm: function(formid){alert('hi');
                    cm = $('#list10').jqGrid('getColProp',"PROFILE_NAME"); cm.hidden=true;
                    cm = $('#list10').jqGrid('getColProp',"PROFILE_ID"); cm.editable=true;
                    cm = $('#list10').jqGrid('getColProp',"TITLE"); cm.hidden=false;
                    cm = $('#list10').jqGrid('getColProp',"FIRST_NAME"); cm.hidden=false;
                    cm = $('#list10').jqGrid('getColProp',"MIDDLE_NAME"); cm.hidden=false;
                    cm = $('#list10').jqGrid('getColProp',"LAST_NAME"); cm.hidden=false;},recreateForm: true},
            {closeOnEscape:true, recreateForm: true,mtype: 'POST',url: 'ProfileServ',delData: {action: 'profileDelete',profileID: function () {return profileID;}},closeOnSubmit: true},
            {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true,width: 700},
            {recreateForm: true,width:700,navkeys: [true,38,40],closeOnEscape:true});

In My colModel 4 column are hidden, because I doesn’t want them to be shown in tabular format. I want to show those columns when user wants to Insert or Update the data.

So in my code I am setting those columns properties to cm.hidden=false; on beforeShowForm event. but the problem is that When user wants to edit the data he has to click twice on the edit button, on first click only two columns are shown which are not hidden in colModel, and when user clicks twice on the edit button then the fields which I have set cm.hidden=false; are shown. Same thing is happening while Inserting the data.

I think I have placed recreateForm: true at wrong place or in wrong event.

Thanks in advance.

Answer 1

Just set the hidden rows to have the following property:

editable:true, editrules: {edithidden:true}},

JSfiddle example
http://jsfiddle.net/dumbguy5689/9ueDL/4/