How can i add a confirm modal window when deleting a row from the grid?
i was inspired by this example,
http://jsfiddle.net/Xtreu/ because of the gray colors that fits with the default theme from kendo ui.
but because i am not using it in a form,i do not know how to make it modal.
Regards,
Daniel
13 Answers, 1 is accepted
To achieve this you should specify a custom command instead of the default delete command. In the handler for the custom command you could display the modal window and manually delete the row through the Grid API.
Regards,
Dimiter Madjarov
the Telerik team

Regards,
Daniel
Here is a sample scenario for adding a custom confirmation box for deleting a row.
E.g.
- Add the custom delete command.
columns.Command(c => c.Custom(
"Custom Delete"
).Click(
"openWindow"
));
- Add the markup for the window.
<div id=
"modalWindow"
>
<h2>Delete?</h2>
<button id=
"yes"
class=
"k-button"
>Yes</button>
<button id=
"no"
class=
"k-button"
>No</button>
</div>
- Initialize the Kendo Window on document ready
var
wnd;
$(document).ready(
function
() {
wnd = $(
"#modalWindow"
).kendoWindow({
title:
"Delete confirmation"
,
modal:
true
,
visible:
false
,
resizable:
false
,
width: 300
}).data(
"kendoWindow"
);
});
- Add the custom command click event handler.
function
openWindow(e) {
e.preventDefault();
var
grid =
this
;
var
row = $(e.currentTarget).closest(
"tr"
);
wnd.center().open();
$(
"#yes"
).click(
function
() {
grid.removeRow(row);
wnd.close();
});
$(
"#no"
).click(
function
() {
wnd.close();
});
}
Kind regards,
Dimiter Madjarov
the Telerik team

Thanks for keeping me updated on the topic. Please let me know if you managed to solve the issue or I could assist you further.
Have a great day!
All the best,
Dimiter Madjarov
the Telerik team

Thank you for the tutorial how to make a modal window.

how can i do for this to have a delete confirmation if i have ActionResult delete in mycontroller and this is a part of my view
if any one can help me thats will be great thank so mutch
columns.Command(command =>
{
command.Edit();
//command.Destroy();
command.Custom("Custom Delete").Click("openWindow");//??
}).Width(200);
})
.DataSource(datasource => datasource.Ajax()
.Model(model => model.Id(record=>record.IdEntite))
.Read(read=>read.Action("GetAll","EntiteExterne"))
.Create( create=>create.Action("Add","EntiteExterne"))
.Update(update=>update.Action("Update","EntiteExterne"))
.Destroy(delete=>delete.Action("Delete","EntiteExterne"))// i would delete confirmation
.PageSize(10)
)
.ToolBar(toolbar =>toolbar.Create())
.Editable(editable=>editable.Mode(GridEditMode.InLine))
.Sortable()
.Selectable()
.Pageable (pageable=>
{pageable.Refresh(true);
pageable.PageSizes(true);
})
)
in my controller i have this :
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete([DataSourceRequest] DataSourceRequest request, EntiteExterne entite)
{
// Test if company object and modelstate is valid.
if (entite != null && ModelState.IsValid)
{
// Delete company from UoW.
_database.EntiteExternes.Delete(entite);
// Call to database and delete the deleted record.
_database.Save();
}
// Return modelstate info back to client side in json format.
return Json(ModelState.ToDataSourceResult());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete([DataSourceRequest] DataSourceRequest request, EntiteExterne entite)
{
// Test if company object and modelstate is valid.
if (entite != null && ModelState.IsValid)
{
// Delete company from UoW.
_database.EntiteExternes.Delete(entite);
// Call to database and delete the deleted record.
_database.Save();
}
// Return modelstate info back to client side in json format.
return Json(ModelState.ToDataSourceResult());
}
You could use the built in Grid delete confirmation window. Another option would be to disable it
.Editable(editable => editable.Mode(...).DisplayDeleteConfirmation(
false
))
and use the approach from my previous post to display a custom confirmation window.
Regards,
Dimiter Madjarov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

I am glad that the information was helpful. Do not hesitate to contact us again for future Kendo UI issues.
Regards,
Dimiter Madjarov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

I needed to change openWindow(e) function above as follows for it to work for me:
...
$("#modalWindow #yes").click(function () {
grid.removeRow(row);
wnd.close();
});
$("#modalWindow #no").click(function () {
wnd.close();
});

I've implemented the above and it is sortof working. Here is the behavior I'm experiencing:
1. create a new grid record.
2. click the custom delete button. (record removed from grid but delete controller not run)
3. refresh page (record re-appears in the grid)
4. click the custom delete button again. (delete controller runs and deletes the record)
Should I be doing something after create of new record?
Create controller looks like this:
public ActionResult ElectionLocationCreate([DataSourceRequest]DataSourceRequest request, ElectionLocations model, int id)
{
if (ModelState.IsValid)
{
var el = new ElectionLocation();
el.ElectionControlID = id;
CopyElectionLocationModelToElectionLocation(model, el);
el.CreatedBy = HttpContext.User.Identity.Name;
el.CreatedDate = DateTime.Now;
db.ElectionLocations.Add(el);
db.SaveChanges();
//return RedirectToAction("Index");
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
//model.IsNew = true;
return View(model);
}
