In jqGrid put edit button in a column see the below code:
Complete aspx code:
Complete aspx code:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="jqgridexample.aspx.cs"
Inherits="calendarcoloring.jqgridexample"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JQGridReq/jquery-1.9.0.min.js"
type="text/javascript"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css"
/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="JQGridReq/grid.locale-en.js"
type="text/javascript"></script>
<script src="JQGridReq/jquery.jqGrid.js"
type="text/javascript"></script>
<link href="JQGridReq/ui.jqgrid.css"
rel="stylesheet"
type="text/css"
/>
<script src="Scripts/json2.js"
type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="topList">
</div>
<table id="list"></table> <%--for grid--%>
<div id="pager">
</div> <%--for paging--%>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
function getCountry() {
var country;
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
async: false,
url: "jqgridexample.aspx/getNational",
dataType: "json",
success: function (data) {
country = data.d;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
return country;
}
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "jqgridexample.aspx/getEmployee",
dataType: "json",
success: function (data) {
data = data.d;
$("#list").jqGrid({
datatype: "local",
colNames: ['','Employee Id',
'Name', 'Email',
'Phone', 'Password',
'Nationality', 'Date
of Birth'],
colModel: [
{ name: 'act', index: 'act',
width: 75, align: 'center',search:false, sortable: false,
formatter: 'actions',
formatoptions: {
keys: true,
editformbutton:true,
editOptions : {
recreateForm: true,
reloadAfterSubmit:false,
width: 500,
closeAfterEdit: true,
ajaxEditOptions:
{ contentType: "application/json"
},
serializeEditData: function (postData) {
var postdata = { 'data':
postData };
return JSON.stringify(postdata);
}
} ,
delOptions:
{
ajaxDelOptions: {
contentType: "application/json" },
reloadAfterSubmit:
false,
onclickSubmit: function (eparams) {
var retarr = {};
var sr = $("#list").getGridParam('selrow');
rowdata = $("#list").getRowData(sr);
retarr = {
employeeId: rowdata.employeeId };
return retarr;
},
serializeDelData: function (data) {
var postData = { 'data':
data };
return JSON.stringify(postData);
}
} // we want use [Enter] key to save the row and [Esc] to
cancel editing.
}
},
{ name: 'employeeId', index: 'employeeId',
width: 55, stype: 'text', sortable: true, editable: true,
formoptions: { rowpos: 1, colpos: 1 }, editrules: { integer: true} },
{ name: 'name', index: 'name', width:
90, stype: 'text', sortable: true, editable: true,
editrules: { required: true }, formoptions: {
rowpos: 2, colpos: 1} },
{ name: 'email', index: 'email',
width: 100, stype: 'text', sortable: true, editable: true,
editrules: { email: true, required: true }, formoptions: { rowpos: 2, colpos: 2} },
{ name: 'phone', index: 'phone',
width: 80, align: "right", stype: 'text', sortable: true,
editable: true, formoptions: { rowpos: 3,
colpos: 1} },
{ name: 'pwd', index: 'pwd', width: 80,
align: "right", stype: 'text', edittype: 'password',
sortable: true, editable: true, formoptions: { rowpos: 3, colpos: 2} },
{ name: 'nationalId', index: 'nationalId',
width: 80, align: "right",
formatter: 'select',stype: 'select',
editable: true, edittype: "select",
editoptions: { value: getCountry() }, formoptions: { rowpos: 4, colpos: 1 }
},
{ name: 'dateOfBirth', index: 'dateOfBirth',
width: 80, align: "right",
edittype: 'text', editable: true,
editoptions: {
dataInit: function (el)
{
$(el).datepicker({
dateFormat:
"dd/mm/yy",
changeMonth: true,
changeYear: true, }); } },
formoptions: {
rowpos: 4, colpos: 2 }
}
],
data: JSON.parse(data),
rowno: 10,
loadonce:true,
/* multiselect:true,*/
rowlist: [5, 10, 20],
pager: '#pager',
viewrecords: true,
gridview: true,
sortorder: 'asc',
toppager: true,
cloneToTop: true,
altrows: true,
autowidth: false,
hoverrows: true,
height:300,
/* toolbar: [true, "top"],*/
rownumbers: true,
caption: "Employee Data",
editurl: 'jqgridexample.aspx/EditUpdateDel'
/*
ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow', rowid,
{recreateForm:true,closeAfterEdit:true,
closeOnEscape:true,reloadAfterSubmit:false, width: 500});
}*/
});
$('#list').jqGrid('navGrid', '#pager',
{
edit: false,
add: true,
del: false,
search: false,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
cloneToTop: true
}
, {
},
{
recreateForm: true,
beforeShowForm: function (form) {
$('#tr_employeeId', form).hide();
},
width: 500,
reloadAfterSubmit:
false,
closeAfterAdd: false,
ajaxEditOptions: {
contentType: "application/json" },
serializeEditData:
function (postData) {
var postdata = { 'data':
postData };
return JSON.stringify(postdata);
}
},
{
});
$("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true
});
var grid = $("#list");
var topPagerDiv = $('#' + grid[0].id + '_toppager')[0];
$("#" + grid[0].id + "_toppager_center",
topPagerDiv).remove(); /"#list_toppager_center"
$(".ui-paging-info",
topPagerDiv).remove();
var bottomPagerDiv = $("div#pager")[0];
$("#add_" + grid[0].id,
bottomPagerDiv).remove();
$("#edit_" + grid[0].id,
bottomPagerDiv).remove();
$("#del_" + grid[0].id,
bottomPagerDiv).remove();
$("#refresh_" + grid[0].id,
bottomPagerDiv).remove();
// "#add_list"
},
error: function (XMLHttpRequest,
textStatus, errorThrown) {
debugger;
}
});
});
</script>
</body>
</html>
Happy coding
