<table>
<tr>
<th>
EmployeeNames
</th>
<td>
<select id="employeenames">
</select>
</td>
</tr>
<tr>
<th>
WorkingHours
</th>
<td>
<input id="txtworkinghours" type="text" onchange="result()" />
</td>
</tr>
<tr>
<th>
Rate
</th>
<td>
<input id="txtrate" type="text" onchange="result()" />
</td>
</tr>
<tr>
<th>
Total
</th>
<td>
<input id="txttotal" type="text" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnsave" value="SAVE" onclick="return btnsave_onclick()" onclick="return btnsave_onclick()" />
</td>
</tr>
</table>
<table id="employeehours" style="height: 100%; width: 100%">
</table>
<div id="employeehourspager">
</div>
</asp:Content>
var grid = $("#employeehours");
$("#employeehours").jqGrid({
datatype: function (postdata) {
$.ajax({
url: "EmployeeHours.aspx/employeehoursdetails",
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postdata),
dataType: "json",
success: function (data, st) {
if (st == "success") {
var grid = $("#employeehours")[0];
grid.addJSONData(JSON.parse(data.d));
}
},
error: function () {
alert("YOU DID MISTAKE");
}
});
},
colNames: ['Empid', 'EmpHoursId', 'FirstName', 'LastName', 'WorkingDate', 'WorkedHours', 'rate', 'total', 'mode'],
colModel: [{ name: 'Empid', index: 'Empid', key: true, hidden: true, width: 50, sorttype: "int", align: 'left', sortable: true, editable: true },
{ name: 'EmpHoursId', index: 'EmpHoursId', 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: 2, colpos: 1 }
},
{ name: 'WorkingDate', index: 'WorkingDate', width: 75,
formatter: 'date', srcformat: 'yyyy-mm-dd', newformat: 'm-d-Y', edittype: 'text', editable: true,
editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker(); }, 200); }, formoptions: { rowpos: 6, colpos: 1} }
},
{ name: 'WorkedHours', index: 'WorkedHours', width: 150, sorttype: "string", align: 'left', sortable: true, editable: true,
editrules: {}, formoptions: { rowpos: 8, colpos: 1 }
},
{ name: 'rate', index: 'rate', width: 100, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editrules: {}, formoptions: { rowpos: 8, colpos: 2 }
},
{ name: 'total', index: 'total', width: 100, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "10" },
editrules: {}, formoptions: { rowpos: 10, colpos: 1 }
},
{ name: 'mode', index: 'mode', width: 100, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "10" },
editrules: {}, formoptions: { rowpos: 10, colpos: 2 }
}],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#employeehourspager',
sortname: 'EmpId',
viewrecords: true,
sortorder: 'desc'
});
$('#employeehours').jqGrid('navGrid', '#employeehourspager',
{
key: true,
edit: true,
add: true,
del: true,
search: true,
width: 600,
viewrecords: true,
gridview: true
});