Customize the delete confirmation dialog in ASP.NET MVC Grid
Currently there is no template support to customize the delete confirm dialog content. In ASP.NET MVC Grid, you can achieve it by using the following workaround.
Solution
Delete Confirmation dialog support is provided in v12.4.0.30. You can enable the option by using the ShowDeleteConfirmDialog Api.
Example
The following example explains how to customize the delete confirm dialog.
- Code to render the dialog content.
The details of the record to be edited are displayed in the delete confirm dialog. The following code example corresponds to the record details.
JS
<script type="text/x-jsrender" id="dContent">
<tr><td>Order ID:</td><td>{{:OrderID}}</td></tr>
<tr><td>Customer ID:</td><td>{{:CustomerID}}</td></tr>
<tr><td>Employee ID:</td><td>{{:EmployeeID}}</td></tr>
<tr><td>Freight:</td><td>{{:Freight}}</td></tr>
<tr><td>Ship City:</td><td>{{:ShipCity}}</td></tr>
</script>
- Render the Grid control
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.gridData,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
allowPaging: true
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 100 },
{ field: "CustomerID", headerText: "Customer ID", width: 130 },
{ field: "Freight", headerText: "Freight", width: 100, format: "{0:C}" },
{ field: "ShipCity", headerText: "ShipCity", width: 100 }
],
create: "create",
});
});
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting().ShowDeleteConfirmDialog())
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(110).Add();
col.Field("Freight").HeaderText("Freight").Width(75).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
.ClientSideEvents(eve => eve.Create("create"))
})
)
[In controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
return View();
}
}
}
ASP.NET
[aspx]
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<ClientSideEvents Create="create" />
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" ShowDeleteConfirmDialog="true"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
<ej:Column Field="ShipCity" HeaderText="Ship City" />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindDataSource();
}
private void BindDataSource()
{
int orderId = 10000;
int empId = 0;
for (int i = 1; i < 9; i++)
{
order.Add(new Orders(orderId + 1, "VINET", empId + 1, 32.38, new DateTime(2014, 12, 25), "Reims"));
order.Add(new Orders(orderId + 2, "TOMSP", empId + 2, 11.61, new DateTime(2014, 12, 21), "Munster"));
order.Add(new Orders(orderId + 3, "ANATER", empId + 3, 45.34, new DateTime(2014, 10, 18), "Berlin"));
order.Add(new Orders(orderId + 4, "ALFKI", empId + 4, 37.28, new DateTime(2014, 11, 23), "Mexico"));
order.Add(new Orders(orderId + 5, "FRGYE", empId + 5, 67.00, new DateTime(2014, 05, 05), "Colchester"));
order.Add(new Orders(orderId + 6, "JGERT", empId + 6, 23.32, new DateTime(2014, 10, 18), "Newyork"));
orderId += 6;
empId += 6;
}
this.OrdersGrid.DataSource = order;
this.OrdersGrid.DataBind();
}
[Serializable]
public class Orders
{
public Orders()
{
}
public Orders(int orderId, string customerId, int empId, double freight, DateTime orderDate, string shipCity)
{
this.OrderID = orderId;
this.CustomerID = customerId;
this.EmployeeID = empId;
this.Freight = freight;
this.OrderDate = orderDate;
this.ShipCity = shipCity;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public int EmployeeID { get; set; }
public double Freight { get; set; }
public DateTime OrderDate { get; set; }
public string ShipCity { get; set; }
}
}
- In the create event of the Grid, the beforeOpen function is bound to the beforeOpen event of ejDialog.
JS
<script type="text/javascript">
var temp = $.templates(dContent);
//create event of the grid
function create(args) {
//append the title div to the ejDialog
$("#GridConfirmDialog_wrapper").prepend("<div id='GridConfirmDialog_title' class='e-titlebar e-header e-draggable e-js' tabindex=''><span class='e-title'>Delete Confirmation Dialog</span></div>")
$("#GridConfirmDialog").ejDialog({
beforeOpen: "beforeOpen"//bind the function beforeOpen to the beforeOpen event of the ejDialog
});
}
</script>
- In the beforeOpen event of the ejDialog, the row details are prepended to the content of the ejDialog, such that every time the delete confirmation dialog pops up, the selected row details prepend to the dialog content and thus displayed.
JS
//beforeOpen event of the ejDialog
function beforeOpen(args) {
var gridobj = $("#Grid").data("ejGrid");
var data = gridobj.model.currentViewData[gridobj.model.selectedRowIndex];//get the details of the selected record
$("#GridConfirmDialog").find(".details").remove();
$("#GridConfirmDialog").prepend("<div class= details><table>" + temp.render(data) + "</table></div>")// prepend the selected record details to the ejDialog
}
The following screenshot illustrates the output.
Customized delete confirmation dialog
Conclusion
I hope you enjoyed learning about how to customize the delete confirmation dialog in ASP.NET MVC Grid.
You can refer to our ASP.NET MVC Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
