<script type="text/javascript">
$(document).ready(function () {
$("#tblJQGrid").jqGrid(
{
url: 'Default/GetDataForEmployeeJQGrid',
datatype: "json",
reloadAfterSubmit: true,
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['TaskId', 'EmployeeId', 'Name'],
colModel: [
{ name: 'TaskId', index: 'TaskId', width: 50, stype: 'text' },
{ name: 'EmployeeId', index: 'EmployeeId', width: 20, stype: 'text', editable: true, editoptions: { dataEvents: [{ type: 'focusout', fn: function (e) { $('#HiddenNet').val(this.value); } }] }, editrules: { custom: false, } },
{ name: 'Name', index: 'Name', width: 150, editable: true, editoptions: { dataEvents: [{ type: 'focusout', fn: function (e) { $('#HiddenNet').val(this.value); } }] }, editrules: { custom: true, } }],
editurl: "/Default/GridEdit",
pager: jQuery('#listpager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
caption: "List Employee Details"
});
jQuery("#tblJQGrid").jqGrid('navGrid', '#listpager', {
edit: true,
add: true,
del: true,
search: true,
refresh: true,
},
{
url: "/Default/GridEdit/", closeAfterEdit: true, beforeShowForm: function (formid) { $("#Id",formid).hide(); }
},
{
closeAfterAdd: true,
recreateForm: true,
viewPagerButtons: false
},
{
recreateForm: true
});
$("#tblJQGrid").setGridWidth(Math.round($(window).width()-100, true));
$('.ui-pg-button').on('click', function (ev) {
ClickEventId = this.id;
});
});
</script>