jQuery Grid Plugin - jqGrid

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

}

});

Oleg i tried replacing navgrid call ,but still its not working 

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.

Is there any need to have  add and edit options for both the operation or jQuery.extend(jQuery.jgrid.edit);  will suffice for both edit and add.

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.

Yes i tried your line ,but still not able to resolve the problem.Please look into my above posted code,if you find some error.
When i select a row and click on edit,and then cancel edit operation.And when i click add option,the row remains selected ,is the problem because of this issue.the problem is when we click  on add button it opens edit dialog box.

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

Oleg,

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

Thanks.

Palash