Telerik MVC grid ajax delete with client event - asp.net-mvc-3

Question

I am trying to delete records from telerik mvc grid using telerik's ajax delete event.
I have defined onDelete client event also, where I validate few things and on the basis of that I want to delete the record, my client side onDelete function is like this
function onDelete(e) {
if (confirm("Are you sure you want to delete?")) {
$.getJSON('#Url.Action("GetStatus", "MyController")', { UserId: e.dataItem.UserId}, function (status) {
if (status == 0) {
return true;
}
else if (status == 1) {
return confirm("Status 1, sure you want to delete?");
}
else {
alert("Status 2, cannot be deleted");
return false;
}
});
}
else {
return false;
}
}
On Grid side I have something like this
.DataBinding(dataBinding => dataBinding.Ajax()
.Delete("_Delete", "MyController"))
.ClientEvents(events => events.OnDelete("onDelete"))
The problem is if I select cancel to the very first confirm, it doesn't delete the record. But if I say OK for deletion then it doesn't wait for further validation(that I am doing through ajax responses) and deletes the record.
If I simply put return true or return false it works.
Seems it is not waiting for ajax response. Any work around?

Answer 1

For this requirement you have to manage this thing manually.
Please try with the below code snippet.
View
Mark Up
#(Html.Telerik().Grid<TelerikMvcApplication1.Models.Order>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID);
columns.Bound(o => o.OrderName);
columns.Bound(o => o.OrderID)
.ClientTemplate("<a onclick='DeleteOrder(<#= OrderID #>)' class='t-button'>Delete</a?")
.Title("Picture");
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "Home"))
.Pageable()
.Sortable()
.Scrollable()
.Groupable()
.Filterable()
)
JS
function DeleteOrder(OrderID) {
if (confirm("Are you sure you want to delete?")) {
$.getJSON('#Url.Action("GetStatus", "Home")', { OrderID: OrderID }, function (status) {
if (status == 0) {
ConfriMDelete(OrderID);
}
else if (status == 1) {
if (confirm("Status 1, sure you want to delete?")) {
ConfriMDelete(OrderID);
}
else {
return false;
}
}
else {
alert("Status 2, cannot be deleted");
return false;
}
});
}
else {
return false;
}
}
function ConfriMDelete(OrderID) {
$.getJSON('#Url.Action("_Delete", "Home")', { OrderID: OrderID }, function (status) {
var grid = $("#Grid").data("tGrid");
grid.ajaxRequest();
});
}
Controller
[GridAction]
public ActionResult _AjaxBinding()
{
return View(new GridModel<Order>
{
Data = GetOrders()
});
}
protected List<Order> GetOrders()
{
List<Order> orders = new List<Order>();
for (int i = 0; i < 5; i++)
{
Order o1 = new Order();
o1.OrderID = i;
o1.OrderName = "Name" + i;
orders.Add(o1);
}
return orders;
}
public ActionResult GetStatus(int OrderID)
{
//your code
}
public ActionResult _Delete(int OrderID)
{
// perform delete
return Json(new { status = 1 });
}