Jqgrid how to add "delete button" - php

Question

I want to incorporate delete button in the actions column. It can come beside can cel button. This is how it looks as of now-
This is my code:
<script>
var task_link = "http://localhost/cssdeck/dashboard/dashboar.php?Emp_ID=";
$(document).ready(function () {
$("#emp_grid").jqGrid({
url: "getGridData.php?q=3",
datatype: "json",
colNames: ["Emp Id", "Emp Name", "Emp Start Date", "Emp End Date" , "Percent", "Status","ACTIONS"],
colModel: [
{ name: "emp_id",index:"emp_id",editable:true,formatter: formatEmpID},
{ name: "emp_name",index:"emp_name",align:"center",editable:true},
{ name: "emp_startDate",index:"emp_startDate",sorttype:'date',edittype:"text",formatter: 'date',formatoptions: { srcformat: 'Y/m/d', newformat: 'm/d/Y'},editable:true,
editoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).datepicker({
dateFormat: 'mm/dd/yy',
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
},
searchoptions: {
dataInit: function(elem) {
$(elem).datepicker({
dateFormat: 'mm/dd/yy',
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
}
},
{ name: "emp_endDate",index:"emp_endDate",sorttype:'date',edittype:"text",formatter: 'date',formatoptions: { srcformat: 'Y/m/d', newformat: 'm/d/Y'},editable:true,
editoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).datepicker({
dateFormat: 'mm/dd/yy',
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
},
searchoptions: {
dataInit: function(elem) {
$(elem).datepicker({
dateFormat: 'mm/dd/yy',
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
}
},
{ name: "percentComplete",index:"percentComplete",editable:true},
{ name: "emp_status",index:"emp_status",editable:true,edittype:"select",editoptions: {value:"Onboarding:Onboarding;Released:Released"}},
{name:'act',index:'act', width:130,sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pemp_grid',
loadonce:true,
ignoreCase: true,
viewrecords: true,
autowidth:true,
cmTemplate: { title: false },
height:'100%',
gridComplete: function(){
var ids = jQuery("#emp_grid").jqGrid('getDataIDs');
for(var i=0;i<ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:40px;' type='button' value='Edit' onclick=\"jQuery('#emp_grid').jqGrid('editRow','"+cl+"');\" />";
se = "<input style='height:22px;width:40px;' type='button' value='Save' onclick=\"jQuery('#emp_grid').jqGrid('saveRow','"+cl+"');\" />";
ce = "<input style='height:22px;width:50px;' type='button' value='Cancel' onclick=\"jQuery('#emp_grid').jqGrid('restoreRow','"+cl+"');\" />";
jQuery("#emp_grid").jqGrid('setRowData',ids[i],{act:be+se+ce});
}
},
editurl: "update.php",
caption: "Employee Details"
});
$("#emp_grid").jqGrid('navGrid',"#pemp_grid",{edit:false,del:false,refresh: false, search: false} );
$("#emp_grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
});
function formatEmpID(cellvalue, options, rowObject) {
var link = task_link + cellvalue;
return "<a href='" + link + "' target='_blank'>" + cellvalue + "</a>";
}
</script>
I have been trying to achieve this from past 2 days but all effort in vain.
Would really appreciate any help.