|
Currently there is no template support to customize the delete confirm dialog content. 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.
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
JS MVC ASP.NET
JS
JS The following screenshot illustrates the output.
Customized delete confirmation dialog |
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
Hi, this doesn't seem to work in MVC.
In the create event, the $("#GridConfirmDialog_wrapper") doesn't exist yet.
When I click the delete button in the toolbar, it does exist. It looks like the confirmdialog is created on demand after clicking the delete button.
Is this changed in meantime? Should I use another event?
Hi Erik,
We checked in our sample with the latest version script file(15.3.0.29) and in create event we can able to get the confirmDialog_wrapper. We suspect that you have not mention the Grid id in the confirmDialog_wrapper. Here Grid(“GridConfirmDialog_wrapper) means Grid id. So, we have to mention the Grid id in create event to get the confirmDialog_wrapper.
To avoid this, we suggest you to use the below code example in your sample:
<script type="text/javascript">
var temp = $.templates(dContent);
//create event of the grid
function create(args) {
//append the title div to the ejDialog
$("#" + this.element.attr("id") + "ConfirmDialog_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>")
$("#" + this.element.attr("id") + "ConfirmDialog").ejDialog({
beforeOpen: "beforeOpen"//bind the function beforeOpen to the 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
$("#" + this.element.attr("id")).find(".details").remove();
$("#" + this.element.attr("id")).prepend("<div class= details><table>" + temp.render(data) + "</table></div>")// prepend the selected record details to the ejDialog
}
</script>
We also created an improvement task for the above changes and it will be reflected in online ASAP.
Regards,
Prasanna Kumar N.S.V
Thanks for your response!
I did have the right Grid ID, but it still doesn't exist at the create event.
It is solved for now by using a window.setTimeout at 500 ms. After this small time, the ConfirmDialog and ConfirmDialog_Wrapper do exist.
It kinda proves that the create event *could be* too early to do this. Maybe it can help others who have the same.
Regards,
Erik
Hi Erik,
In this we suspect that you have bound remote data in Grid. While using remote data we suggest you to use dataBound event of ejGrid. The dataBound event will be triggered when the grid is bound with data during initial rendering. In this event we can get the ConfirmDialog and ConfirmDialog_Wrapper.
Find the code example and sample:
@(Html.EJ().Grid<object>("Grid")
.Datasource(ds => ds.URL("/Grid/DataSource").Adaptor("UrlAdaptor"))
----------------------
.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.DataBound("dataBound"))
)
-----------------------------------------
function dataBound(args) {
//append the title div to the ejDialog
$("#" + this.element.attr("id") + "ConfirmDialog_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>")
$("#" + this.element.attr("id") + "ConfirmDialog").ejDialog({
beforeOpen: "beforeOpen"//bind the function beforeOpen to the beforeOpen event of the ejDialog
});
}
Sample: http://www.syncfusion.com/downloads/support/directtrac/186729/ze/Sample145862-1109288526
Refer to the Help document for the dataBound event.
https://help.syncfusion.com/api/js/ejgrid#events:databound
Regards,
Prasanna Kumar N.S.V
Is it possible to have exemple for customizing Delete confirm Message for EJ2 ASP.NET MVC? I don't find any documentation...
Is it possible to format a date in the dialog? I would like to format it as "dd-MM-yyyy". Also, what do you do if one of your fields is a foreign key? I would like it to display the text value from forein key table, not the id.
Thanks
Hi Chris,
Queries: Is it possible to format a date in the dialog? I would like to format it as "dd-MM-yyyy". Also, what do you do if one of your fields is a foreign key? I would like it to display the text value from forein key table, not the id.
We can achieve the above requirements using the JsRender Helper functions in the template that is used for the dialog. Please refer the below code example.
<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>{{>~ForeignKeyvalue(EmployeeID)}}</td></tr>
<tr><td>Freight:</td><td>{{:Freight}}</td></tr>
<tr><td>OrderDate:</td><td>{{>~formatDate(OrderDate)}}</td></tr>
</script>
<script type="text/javascript">
$.views.helpers({
ForeignKeyvalue: function (val) {
var obj = $("#Grid").ejGrid("instance");
var foreigndata = ej.DataManager(obj.model.columns[1].dataSource).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, val, false).select("FirstName").take(1));
return foreigndata;
}
});
$.views.helpers({
formatDate : function(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [day, month, year].join('-');
}
});
$(function () {
// the datasource "window.gridData" is referred from jsondata.min.js
var data = window.gridData;
$("#Grid").ejGrid({
dataSource: data,
allowPaging: true,
create: "create",
…...
columns: [
{ field: "OrderID", width: 80, isPrimaryKey: true,textAlign: ej.TextAlign.Right,validationRules: {required:true, number: true },headerText: "Order ID"} ,
{ field: "EmployeeID", foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView, width: 75, headerText: "First Name" },
{ field: "Freight", textAlign: ej.TextAlign.Right, width: 75, editType: ej.Grid.EditingType.Numeric,editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, format: "{0:C}" },
{ field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:dd/MM/yyyy}", textAlign: ej.TextAlign.Right, priority: 2 },
]
});
});
</script>
In the above code example we have used the helper functions to display the Foreign Key values and date in the dialog.
We have prepared a JsPlayground sample which can be referred from the below link.
Sample: http://jsplayground.syncfusion.com/krozqzg2
Regards,
Sathyanarayanamoorthy
Hi Chris,
Queries: Is it possible to format a date in the dialog? I would like to format it as "dd-MM-yyyy". Also, what do you do if one of your fields is a foreign key? I would like it to display the text value from forein key table, not the id.
We can achieve the above requirements using the JsRender Helper functions in the template that is used for the dialog. Please refer the below code example.
<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>{{>~ForeignKeyvalue(EmployeeID)}}</td></tr>
<tr><td>Freight:</td><td>{{:Freight}}</td></tr>
<tr><td>OrderDate:</td><td>{{>~formatDate(OrderDate)}}</td></tr>
</script>
<script type="text/javascript">
$.views.helpers({
ForeignKeyvalue: function (val) {
var obj = $("#Grid").ejGrid("instance");
var foreigndata = ej.DataManager(obj.model.columns[1].dataSource).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, val, false).select("FirstName").take(1));
return foreigndata;
}
});
$.views.helpers({
formatDate : function(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [day, month, year].join('-');
}
});
$(function () {
// the datasource "window.gridData" is referred from jsondata.min.js
var data = window.gridData;
$("#Grid").ejGrid({
dataSource: data,
allowPaging: true,
create: "create",
…...
columns: [
{ field: "OrderID", width: 80, isPrimaryKey: true,textAlign: ej.TextAlign.Right,validationRules: {required:true, number: true },headerText: "Order ID"} ,
{ field: "EmployeeID", foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView, width: 75, headerText: "First Name" },
{ field: "Freight", textAlign: ej.TextAlign.Right, width: 75, editType: ej.Grid.EditingType.Numeric,editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, format: "{0:C}" },
{ field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:dd/MM/yyyy}", textAlign: ej.TextAlign.Right, priority: 2 },
]
});
});
</script>
In the above code example we have used the helper functions to display the Foreign Key values and date in the dialog.
We have prepared a JsPlayground sample which can be referred from the below link.
Sample: http://jsplayground.syncfusion.com/krozqzg2
Regards,
Sathyanarayanamoorthy
Hi Tommy,
Queries: Is it possible to have example for customizing Delete confirm Message for EJ2 ASP.NET MVC? I don't find any documentation.
We have achieved the above requirement using created event of grid and beforeOpen event of dialog. We have also prepared a sample that can be downloaded from the below link.
Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC-sample1899139977
In this sample we have changed the title for the delete confirmation dialog in created event and before rendering the dialog we have customized the content of the dialog using beforeOpen event
Please refer the below code example:
<div>
@Html.EJS().Grid("Grid").
.EditSettings(e => { e.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true); }).Created("create").Columns(col =>
{
…
}).AllowPaging().Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
</div>
<script type="text/javascript">
function open(args) {
var grid = document.getElementById("Grid").ej2_instances[0];
var editconfirm = document.getElementById("GridEditConfirm");
//Id of delete confirmation dialog
…
var getDOMString = ej.base.compile('<tr><td>Order ID:</td><td>${OrderID}</td></tr>/n <tr><td>Employee ID:</td><td>${EmployeeID}</td></tr> \n <tr><td>Customer ID:</td><td>${CustomerID}</td></tr>');
//rendering template element with template engine compile method
var opElem = getDOMString(grid.getSelectedRecords()[0]);
//binding data for template element
…
document.getElementById("GridEditConfirm").querySelector(".e-footer-content")); //appending content to the dialog
}
function create(args) {
var ele = document.createElement("div"); //create element
var editconfirm = document.getElementById("GridEditConfirm");
ele.id = 'GridConfirmDialog_title';
ele.className='e-title';
ele.innerHTML = "<span class='e-title'>Delete Confirmation Dialog</span>"; //append the span element
editconfirm.insertBefore(ele, editconfirm.firstChild);
//used for inserting the header for dialog
editconfirm.ej2_instances[0].beforeOpen = open;
//triggering beforeOpen event of dialog
};
</script>
<style>
.e-title{
padding: 13px 0 0 48px;
}
</style>
To render template value and element we have use our template engine compile method and append to the dialog content.
Please refer the below documentation link of events and template engine:
Template Engine: https://ej2.syncfusion.com/documentation/base/template-engine.html?lang=typescript
beforeOpen: https://ej2.syncfusion.com/documentation/dialog/api-dialog.html?lang=typescript#beforeopen
Created: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#created
Please let us know if you need further assistance.
Regards,
Manivel S