jqgrid in mvc with multiple delete - asp.net-mvc-3

Question

i want to add multiple delete functionality in my Jqgrid with MVC here there is code for my current grid in Action there is two thing View and delete but i want a check box and out side the grid one button when click on it the checked item should be delete and also before delete action fire message for confirmation please help.
$(document).ready(function ()
{
#if (ViewBag.Filters != string.Empty)
{
#Html.Raw(ViewBag.Filters);
}
$("#jq-grid").jqGrid({
url: '/Home/GetList',//Service URL to fetch data
datatype: 'json',//Data Type which service will return
mtype: 'GET',
postData://Data that will be posted with every request
{
filters: function () {
return $.toJSON([
//Here add the parameters which you like to pass to server
{ Key: "EmployeeName", Value: $("#txtEmployeeName").val() },
{ Key: "Id", Value: $("#txtId").val() }
]);
}
},
colNames: ['Employee Id', 'EmployeeName','empPhoto', 'Action'],//Column Names
colModel: [//Column details
{ name: "Employee Id", index: "Employee Id", width: "220px" },
{ name: "Employee Name", index: "EmployeeName", width: "220px" },
{ name: "empPhoto", index: "empPhoto", width: "50px" ,formatter:imageFormat },
//Do not allow sorting on Action Column
{ name: "Action", index: "Action", sortable: false, width: "220px" }
],
autowidth: true,//Do not use auto width
sortname: '#ViewBag.EmployeeGridRequest.sidx',//This will persist sorting column
sortorder: '#ViewBag.EmployeeGridRequest.sord', // This will persist sorting order
imgpath: '',//if some images are used then show grid's path
caption: 'Employee Grid List',//Grid's Caption, you can set it to blank if you do not want this
scrollOffset: 0,
rowNum: #ViewBag.EmployeeGridRequest.rows, //Total Pages
page: #ViewBag.EmployeeGridRequest.page, // Current Page
rowList: [#ViewBag.EmployeeGridRequest.rowList], // Page Selection Options
viewrecords: true,
// height: "100%",
altRows: true,//Use alternate row colors
altclass: 'jqgaltrow',//Alternate row class
hoverrows: true, //Do not hover rows on mouse over
pager: $('#jq-grid-pager'),//Div in which pager will be displayed
toppager: true,
pgbuttons: true,//Show next/previous buttons
loadtext:'Loading Data please wait ...',
//loadui :'block',//enable by default, block will disable inputs, remove this line if you do not want to block UI
loadComplete: function (response) //Incase you want to perform some action once data is loaded
{
}
});
});

Answer 1

This is one approach that I took after finding no built in solution that jqgrid api provides. Hope this helps. I took this approach because I wanted to allow deletion of those records that passed business rules and to alert user of those records where problem was found.
#jqGrid delete button
//Delete selected devices from jqgrid standard checkbox
jQuery("#jqDevice").jqGrid('navButtonAdd', '#jqDevicePager', {
caption: "",
title: "Delete selected records",
buttonicon: "ui-icon-trash",
position: "first",
onClickButton: function(){
//alert("edit button clicked");
var selIds = $("#jqDevice").getGridParam("selarrrow");
var len = selIds.length;
$("#dialogDeleteConfirm").dialog({
buttons : {
"Confirm" : function() {
//loop through each rows selected and delete
if(selIds.length > 0){
for(var i = len - 1; i >= 0; i--) { //traverse the selarrow array in reverse order.
//alert("Deleting Device... " + selIds[i]); //Test
$.ajax({
type: 'POST',
data: "deviceID=" + selIds[i],
url: '/Device/DeleteDeviceByID',
async: false,
success: function(data, textStatus){
//successfully deleted row
$("#jqDevice").delRowData(selIds[i]);
alert("Successfully deleted records...");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(JSON.parse(jqXHR.responseText));
}
});
}
}else{
alert("No rows selected.");
}
//Close Dialog after user confirms delete action
$(this).dialog("close");
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
}
});
# Controller Action
public ActionResult DeleteDeviceByID(int deviceID)
{
try
{
//update LastModBy before deleting
Device device = _deviceRepository.GetDevice(deviceID);
device.LastModBy = User.Identity.Name;
_deviceRepository.SaveChanges();
_deviceRepository.DeleteDevice(deviceID);
}
catch (Exception ex)
{
//throw new Exception (ex.Message.Replace(Environment.NewLine, string.Empty));
//return Json(new { success = false, message = ex.Message.Replace(Environment.NewLine, string.Empty) });
//Good way to raise error in JSON format
Response.StatusCode = (int)HttpStatusCode.BadRequest;
return Json("There was a problem deleting ID - " + deviceID + " : " + ex.Message.Replace(Environment.NewLine, string.Empty) +
"\r\n\r\n Please try again. If the problem continues, please contact ... for further assistance.");
}
return Json(new { success = true });
}