how to do crud operation in formedit in jqgrid(update,search,delete) using ajax,json,jquery,javascript

See more:

ASP.NET

Javascript

Ajax

JSON

, +

$(document).ready(function () {

var lastSelectedId;
var grid = $("#employee");
$("#employee").jqGrid({
datatype: function (postdata) {
$.ajax({
url: "EmployeeDetails.aspx/getEmployeeDetails",
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postdata),
dataType: "json",
success: function (data, st) {
if (st == "success") {
var grid = $("#employee")[0];
grid.addJSONData(JSON.parse(data.d));
}
},
error: function () {
alert("YOU DID MISTAKE");
}
});
},

jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "EmpId"},


colNames: ['EmpId', 'FirstName', 'LastName', 'MiddleName', 'Gender', 'DateOfBirth', 'MobileNo', 'EmailId', 'Adress', 'Country', 'State', 'zip'],
colModel: [{ name: 'EmpId', index: 'EmpId', key: true, hidden: true, width: 50, sorttype: "int", align: 'left', sortable: true, editable: true},

{ name: 'FirstName', index: 'FirstName', width: 150, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: {}, formoptions: { rowpos:2, colpos: 1 }
},
{ name: 'LastName', index: 'LastName', width: 150, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: {}, formoptions: { rowpos: 3, colpos: 1 }
},
{ name: 'MiddleName', index: 'MiddleName', sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: {}, formoptions: { rowpos: 4, colpos: 1 }
},
{ name: 'Gender', index: 'Gender', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "20" },
editrules: { required: true, edithidden: true }, formoptions: { rowpos: 5, colpos: 1 }
},
{ name: 'DateOfBirth', index: 'DateOfBirth', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { rows: "2", cols: "20", maxlength: "50" },
editrules: { edithidden: true }, formoptions: { rowpos: 6, colpos: 1 }
},
{ name: 'MobileNo', index: 'MobileNo', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "20" },
editrules: { edithidden: true }, formoptions: { rowpos: 7, colpos: 1 }
},
{ name: 'EmailId', index: 'EmailId', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: { edithidden: true }, formoptions: { rowpos: 2, colpos: 2 }
},
{ name: 'Adress', index: 'Adress', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'select', editrules: { required: true, edithidden: true }, formoptions: { rowpos:3, colpos: 2 }
},
{ name: 'State', index: 'State', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "10" },
editrules: { edithidden: true }, formoptions: { rowpos: 1, colpos: 2 }
},
{ name: 'Country', index: 'Country', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: { edithidden: true }, formoptions: { rowpos: 4, colpos: 2 }
},
{ name: 'zip', index: 'Zip', width: 50, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: { edithidden: true }, formoptions: { rowpos: 5, colpos: 2 }



}],

rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#employeepager',

sortname: 'EmpId',
viewrecords: true,
sortorder: 'desc',
onSelectRow: function (EmpId) {
if (EmpId && EmpId !== lastSelectedId) {
$('#employee').restoreRow(lastSelectedId);
lastSelectedId = EmpId
}
},

editurl: "EmployeeDetails.aspx/getEmployeeDetails"
});




$('#employee').jqGrid('navGrid', '#employeepager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
editCaption: 'Edit Employee',

viewrecords: true,
gridview: true

},
{
closeOnEscape: true, //Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {

$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#employee').jqGrid('getGridParam', 'selrow');
var value = $('#employee').jqGrid('getCell', sel_id, 'EmpId');
return value;
}
}
},
{
closeAfterAdd: true, //Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {

$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {

$("#employee").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#employee').jqGrid('getGridParam', 'selrow');
var value = $('#employee').jqGrid('getCell', sel_id, 'EmpId');
return value;
}
}
},
{//SEARCH
closeOnEscape: true

}



)

});







myaspx file code is

public static string getEmployeeDetails()
{
try
{
string strJson = string.Empty;
properties_employeedetails obp = new properties_employeedetails();
abs_sqldb_employeedetails obl = new abs_sqldb_employeedetails();
stringjson json = new stringjson();
DataTable dt = obl.employeedetails(obp);

if (dt.Rows.Count > 0)
{
strJson = json.json_string(dt);
}
return strJson;

}

catch (Exception ex)
{
throw (ex);
}


}


my class file is
public override DataTable employeedetails(properties_employeedetails emproperties)
{
try
{
SqlConnection vcon = new SqlConnection();
vcon.ConnectionString = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;
SqlCommand vcmd = new SqlCommand();
vcmd.Connection = vcon;
vcmd.CommandType = CommandType.StoredProcedure;
vcmd.CommandText = "getEMPLOYEEDETAILS_sp";

SqlDataAdapter sda = new SqlDataAdapter();
sda.SelectCommand = vcmd;
DataTable dt = new DataTable();

sda.Fill(dt);
return dt;
}
catch (Exception ex)
{
throw (ex);

}

}