I have fixed the bug in GitHub. More commits are,but the main is here

Many thanks again for all.

 

Kind Regards

Tony

As always thanks. The problem is only in jqModal: false.

In the new 4.6 the form should be always deleted independent of  recreateForm parameter.

The problem is in jqModal - if it is set to false the form is not deleted independed for the recreateForm.

 

Will try to resolve the problem.

Many thanks again

Best Regards

After repeat of Edit and Add clicks one will have 4 forms with the same id and so on:

So it's definitively a bug in jqGrid.

One more small problem in jqGrid in case of is the font-size value. The font size in the form will be specified by 

.ui-jqdialog {...}

 CSS rule (see the line of ui.jqgrid.css). On the other size the rule will be overwritten by CSS rule

.ui-widget .ui-widget {font-size: 1em;}

 of jQuery UI (see here). To fix the problem one should add additional CSS rule to ui.jqgrid.css:

.ui-jqgrid .ui-jqdialog { font-size:11px; }

I hope that Tony will read the thread and will make the reported problems (recreateForm: true don't remove old form, jqModal: false creates forms with id duplicates and opens always the first form, incorrect font-size in editing form in case of jqModal: false)

Best regards
Oleg

beforeIinitData is working great.Thanks Oleg for your help,would be eager to know further changes made regarding this .

Thanks.

Palash 

jqModal: false

option from editing options. One of the reason of the problem is that jqGrid 4.5.4 (previous version, before 4.6) had the lines 

if(p.recreateForm===true && $("#"+$.jgrid.jqID(IDs.themodal))[0] !== undefined) {
    $("#"+$.jgrid.jqID(IDs.themodal)).remove();
}

which are removed from jqGrid 4.6 because of some reasons. So recreateForm option don't really work in jqGrid 4.6.

An alternative workaround would be to add beforeInitData callback in jQuery.jgrid.edit which would remove the previous created Edit/Add form:

beforeInitData: function () {
    $("#editmod" + this.id).remove();
}

Best regards
Oleg

or can i reload the opening of grid on cancel and close button of form dialog?

If the user clicks Edit button the Edit form will be created. On closing the Edit form the form will be not destroyed, it will be just hidden (see here).

If the user clicks Add button later jqGrid test the recreateForm option of Add operation. If it's true then the previous created Add/Edit form will be destroyed (just some form options will be saved before see the lines).

In general jqGrid try to modify Edit Form to Add form, but it works not always because of different reasons. So I personally recommend everybody to use recreateForm: true.

Do you tried the line

$("#itemsList").jqGrid('navGrid',"#itempager",{del:false,search:false},{recreateForm:true},{recreateForm:true});

 which I posted in one of my previous posts? Is the problem fixed now?

Best regards
Oleg

I have problem that when i click on edit button and then click add button ,it show only edit form with poplulated data.
Please help ,for how to add extend for add operations.

The code which you posted contains exact the same Add and Edit options. So which problem you have exactly? How you see the differences?

Moreover you used recreateForm: true only for Edit and not for Add options. Setting of jQuery.extend(jQuery.jgrid.edit, {...}); would be more logically to do before navGrid.

Regards
Oleg

I am posting whole code 

jQuery('#itemsList').jqGrid(
{
datatype : "jsonstring",
datastr : value,
pager : "#itempager",
viewrecords : true,
rowNum : 10,
height : 400,
rownumbers: true,
rowList:[10,20,50,100],
sortname: 'name',
editurl: 'editData.htm',
mtype: 'POST',
colNames : [ 'Name', 'Type',
'Write', 'Description', 'Default',
'Version', 'Requirement',
'Comment', 'appSource','RowID'],
colModel : [ {
name : 'name',
width : 350,
resizable : true,
sortable : true,
editable : true,
editoptions: {width: 600},
},

{
name : 'type',
width : 80,
resizable : true,
sortable : false,
editable : true
}, {
name : 'writeRead',
width : 50,
resizable : true,
sortable : false,
editable : true
}, {
name : 'description',
width : 300,
resizable : true,
sortable : false,
title :true,
editable : true,
edittype: 'textarea',
editoptions: {rows:"3",cols:"50"}
}, {
name : 'objectDefault',
width : 50,
resizable : true,
sortable : false,
editable : true
},

{
name:'version',
formatter: 'select',
edittype: 'select',editoptions:{value:"1:1;2:2;3:3;4:4;5:5",defaultValue:''},editable:true,
editrules:{required:true,edithidden:false},
sortable : true,
clearSearch:true
}

, {
name : 'requirements',
width : 60,
resizable : true,
sortable : true,
editable : true
}, {
name : 'comments',
width : 150,
resizable : true,
sortable : false,
editable : true
},

{
name:'appSource',
formatter: 'select',
edittype: 'select',
editable:true,
editrules:{required:true,edithidden:false},
clearSearch:true
},
{
name : 'row_id',
width : 120,
resizable : true,
sortable : true,
editable : true,
hidden:true
}]

 

}); jQuery("#itemsList").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
//.trigger("reloadGrid");
$("#itemsList").jqGrid('navGrid',"#itempager",{add:true,edit:true,del:false,search:false,refresh:true},{recreateForm: true},{},{});

 

jQuery.extend(jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
jqModal:false,
reloadAfterSubmit:true,
closeOnEscape:true,
closeAfterEdit:true,
closeAfterAdd:true,
afterSubmit: function(response){
var success = false;
if(response.responseText == "added"){
// alert("Data added successfully");
$('#edit').trigger('click');
}
if(response.responseText == "edited"){
// alert("Data edited successfully");
$('#edit').trigger('click');
}
if(response.responseText == "wrongSource"){
alert("Wrong  Source selected");
}
return[true,"success",null];
},

top: 100,
left: 200,

height: 600,
width: 500,
closeAfterSubmit:true,

// mtype: 'POST',
serializeEditData: function (postData) {
if (postData.name == undefined) { postData.name = null; }

//alert(JSON.stringify(postData));
var elemId;
$('[name=chkboxId]:checked').each(function() {
elemId = $(this).val();
});
var postDatas=JSON.stringify(postData);

postDatas = postDatas.substring(0, postDatas.length -1);

var elemIdJson = ","elem":"";
var elemIdJson = elemIdJson+elemId;
var elemIdJson = elemIdJson+""}";
var postDatas=postDatas.concat(elemIdJson);

return postDatas;

}

});

 

Really thankful to you,as you are working on my issue.

To be sure that the problem is do not recreateForm problem I would recommend you to try to replace navGrid call which you posted to the following

$("#itemsList").jqGrid('navGrid',"#itempager",{del:false,search:false},{recreateForm:true},{recreateForm:true});

I recommend you additionally to rewrite the code of serializeEditData. The current code is very dirty. Instead of appending elem in the way like you do you can use for example onclickSubmit callback

onclickSubmit: function () {
    return {elem: $('[name=chkboxId]:checked').last().val()};
}

and uses just 

serializeEditData: function (postData) {
     return JSON.stringify(postData);
}

regards
Oleg

I used form editing and used jqgrid.extend() function and jQuery.jgrid.edit for both add and edit .

I have used single jQuery.jgrid.edit  for both add and edit ,and used for buttons

 

$("#itemsList").jqGrid('navGrid',"#itempager",{add:true,edit:true,del:false,search:false,refresh:true},{},{},{});

 

Please help.

 

The code is :

 

jQuery.extend(jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
jqModal:false,
reloadAfterSubmit:true,
closeOnEscape:true,
closeAfterEdit:true,
closeAfterAdd:true,
afterSubmit: function(response){
var success = false;
if(response.responseText == "added"){
// alert("Data added successfully");
$('#edit').trigger('click');
}
if(response.responseText == "edited"){
// alert("Data edited successfully");
$('#edit').trigger('click');
}
if(response.responseText == "wrongSource"){
alert("Wrong  Source selected");
}
return[true,"success",null];
},

top: 100,
left: 200,

height: 600,
width: 500,
closeAfterSubmit:true,

// mtype: 'POST',
serializeEditData: function (postData) {
if (postData.name == undefined) { postData.name = null; }

//alert(JSON.stringify(postData));
var elemId;
$('[name=chkboxId]:checked').each(function() {
elemId = $(this).val();
});
var postDatas=JSON.stringify(postData);

postDatas = postDatas.substring(0, postDatas.length -1);

var elemIdJson = ","elem":"";
var elemIdJson = elemIdJson+elemId;
var elemIdJson = elemIdJson+""}";
var postDatas=postDatas.concat(elemIdJson);

return postDatas;

}

});

If you use form editing for example then you can solve your problem probably by adding recreateForm: true option for both Add and Edit options.

Best regards
Oleg

When i click on add option and then if i select a row then want to edit it,it opens add option by default.So is this a bug in jquery when we use jquery.extend() function,please help.