jqgrid recreateform width setting, only working for edit, not for add

Question

Have looked on the jqgrid wiki but cant find what i need.

i have recreateform set to true and setting the width, works fine for edit, but when i try to add a new record the form is not at the width i specify in the recreate form parameters, is their a separate setting for the add form?

here is my code:

myGrid = jQuery("#rowed2").jqGrid({ 
    url:'data/stokistdata_s_json.php?q=3', 
    datatype: "json",
    mtype: "POST", 
    rowNum:10, 
    rowList:[50,100,150,200,300,400,500,600], 
    pager: '#prowed2', 
    sortname: 'id_mdt', 
    viewrecords: true, 
    gridview:true,
    sortorder: "asc", 
    rowNum:50, 
    scroll: true, 
    editurl: "data/server.php", 
    caption:"Stockist's and Orchid days",
    colNames:[
        'Actions',
        'id',
        'Type', 
        'Name', 
        'Geo Address',
        'Display Address',
        'Telephone',
        'Email', 
        'website', 
        'lat', 
        'lng', 
        'flag', 
        'description', 
        'active'
    ], 
    colModel:[{
        name:'Actions',
        index:'Actions',
        width:100,
        sortable:false,
        search:false
    }, {
        name:'id_mdt',
        index:'id_mdt',
        width:15,
        align:"left",
        sortable:true,
        search:false,
        editable:true,
        hidden: true,
        editrules: { edithidden: false }

        //editoptions:{size:"20"}

    }, {
        name:'id_etp',
        index:'id_etp', 
        width:90, 
        align:"left",
        sortable:true,
        editable:true,
        edittype:"select",
        formatter:'select',
        editoptions:{value:":All;1:Stockist;2:Orchid Day"},
        search:true,
        stype:'select',
        sopt: ['eq'],
        searchoptions:{value:":All;1:Stockist;2:Orchid Day"}
    }, {
        name:'Name_mdt',
        index:'Name_mdt',
        align:"left", 
        width:150,
        editable:true,
        search:true,
        stype:'text',
        sopt:['cn']
    }, {
        name:'geoaddr_mdt',
        index:'geoaddr_mdt',
        width:150, 
        align:"left",
        editable:true,
        search:false,
        edittype:"textarea", 
        editoptions:{rows:"3",cols:"30"}
    }, {
        name:'displayaddr_mdt',
        index:'displayaddr_mdt', 
        width:150, 
        align:"left",
        editable:true,
        search:false,
        edittype:"textarea", 
        editoptions:{rows:"3",cols:"30"}
    }, {
        name:'telephone_mdt',
        index:'telephone_mdt', 
        width:80,
        align:"left",
        editable:true,
        search:false
    }, {
        name:'email_mdt',
        index:'email_mdt', 
        width:80, 
        align:"left",
        sortable:false,
        editable:true,
        search:false
    }, {
        name:'website_mdt',
        index:'website_mdt', 
        width:80, 
        align:"left",
        sortable:false,
        editable:true,
        search:false
    }, {
        name:'lat_mdt',
        index:'lat_mdt', 
        width:40, 
        align:"left",
        sortable:false,
        editable:true,
        search:false
    } , {
        name:'lng_mdt',
        index:'lng_mdt', 
        width:40, 
        align:"left",
        sortable:false,
        editable:true,
        search:false
    }, {
        name:'flag_mdt',
        index:'flag_mdt', 
        width:20, 
        align:"left",
        sortable:true,
        editable:true,
        edittype:"select",
        editoptions: {value:{'1':'Flagged','0':'No Flag'}},
        search:true,//
        stype:'select',
        searchoptions:{value:{'':'All','1':'Flagged','0':'No Flag'}}//{value:":Both;1:Flagged;0:No Flag"}
    }, {
        name:'description_mdt',
        index:'description_mdt', 
        width:150, 
        align:"left",
        sortable:false,
        editable:true,
        search:false,
        edittype:"textarea", 
        editoptions:{rows:"3",cols:"30"}
    }, {
        name:'active_mdt',
        index:'active_mdt', 
        width:20, 
        align:"left",
        sortable:true,
        editable:true,
        edittype:"select",
        editoptions: {value:{'1':'Active','0':'Hidden'}},
        search:true,//
        stype:'select',
        searchoptions:{value:{'':'All','1':'Active','0':'Hidden'}} //{value:":Both;1:Active;0:Hidden"}
    }], search : {
         caption: "Search...",
         Find: "Find",
         Reset: "Reset",
         matchText: " match",
         rulesText: " rules"
   },

    gridComplete: function(){ 
        var ids = jQuery("#rowed2").jqGrid('getDataIDs'); 
        for(var i=0;i < ids.length;i++){ 
            var cl = ids[i]; 
            be = "<input style='height:22px;width:20px;' type='button' value='E' alt='Edit Location' onclick=\"jQuery('#rowed2').editGridRow('"+cl+"');\" />"; 
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />"; 
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
            fl = "<input style='height:22px;width:50px;' type='button' value='Find' alt='Find Location' class='findMe' rel='"+cl+"' />";
            gc = "<input style='height:22px;width:50px;' type='button' value='Geo' class='geocodeMe' rel='"+cl+"' />";
            jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:fl+gc}); 
        } 
    }
}); 

jQuery("#rowed2").jqGrid('navGrid',"#prowed2",
    {edit:true,add:true,del:true,search:true,refresh:true},
    {closeOnEscape:true, recreateForm: true, width:600}
); 
myGrid.jqGrid('filterToolbar',{defaultSearch:'cn',stringResult:true})

score 3 · Accepted Answer · answered May 25 '11 at 17:05

You misunderstand the meaning of recreateForm. I try to explain why it is needed.

The method navGrid has up to 7 parameters. You use only prmEdit but not set the prmAdd parameter. That is your main problem. The default implementation of "Add" and "Edit" dialog is so that one created dialog will be not closed, and only hide instead. Moreover, one dialog will be shared (!!!) as "Add" and "Edit" dialog. If recreateForm is used that the previously created (and now hidden) dialog will be destroyed and the the new one will be created.

In your case you defined only "Edit" dialog parameters as {closeOnEscape:true, recreateForm: true, width:600}. So if the user opens the "Add" dialog after the "Edit" dialog the previously hidden "Edit" dialog will be used as "Add" dialog. The title of the dialog will be changed of course.

So you can for example use

jQuery("#rowed2").jqGrid('navGrid',"#prowed2",
    {edit:true,add:true,del:true,search:true,refresh:true},// navGrid options
    {closeOnEscape:true, recreateForm: true, width:600},   // Edit options
    {closeOnEscape:true, recreateForm: true, width:500}    // Add options
);

or redefine the grid defaults which are common for both Edit and Add dialog. For example

jQuery.extend(jQuery.jgrid.edit, {
    closeAfterAdd: true,
    closeAfterEdit: true,
    jqModal: false,
    recreateForm: true,
    savekey: [true,13]
});

thanks very much that clears it up perfectly, i take it by adding the width:600 under the extend setting this will make all forms 600 wide? — Dizzy Bryan High, May 26 '11 at 08:54
@Dizzy Bryan High: You are welcome! The setting in `jQuery.jgrid.edit` are common and it will be used by all form of the form editing (all "Add" and "Edit" gialogs). — Oleg, May 26 '11 at 09:04

jqgrid recreateform width setting, only working for edit, not for add

1 Answers1

Linked