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
Dear sir!
ReplyDeletethe first, thank you for take care and help me full to check my project, your post is exactly and help me very useful, It really interested me.
my project could not load data because my mistake, that is way I input data, I input manual data to sql, I only input into "employee Table" but "national Table" is empty so program could not load data into jqgrid. I do it again step by step as you teach and it is running.
one more time I want to say thanks to you and your post, you are very kind and friendly. this is the first time this is first time I contact to an Indian.
Thanks and see you again!
Sir,
ReplyDeleteInline editing is not working. Pls help..
can you tell me what types of problem you are facing?
DeleteHi Manoj ji I need edit and delete function in within Jqgrid.please post here.
ReplyDeleteJqgrid me row edit,delete and update ka code chahiye sir ji :)
ReplyDeleteHi Mantosh ji.
DeleteGood to see you. I had created Inline editing with little workaround and it was working find for me . So as per your messages I have posted you can find and try it. If you have already done then let me know how you have done... if you need source code let me know....