We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the delete confirmation dialog?

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.

  1. 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

  1. Render the Grid control

JS

MVC

ASP.NET

  1. In the create event of the Grid, the beforeOpen function is bound to the beforeOpen event of ejDialog.

JS

  1. 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

The following screenshot illustrates the output.

Customized delete confirmation dialog

Article ID: Published Date: Last Revised Date: Platform: Control:
5059 05/27/2015 08/06/2015 ASP.NET MVC Grid
Did you find this information helpful?
Comments
Erik Dekker Sep 13, 2017

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?

Reply
Prasanna Kumar Viswanathan [Syncfusion] Sep 14, 2017

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("

Delete Confirmation Dialog
")

        $("#" + 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("

" + temp.render(data) + "
")// 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

Reply
Erik Dekker Sep 14, 2017

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

Reply
Prasanna Kumar Viswanathan [Syncfusion] Sep 15, 2017

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("

Delete Confirmation Dialog
")

        $("#" + 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

Tommy Mailhot Jun 22, 2018

Is it possible to have exemple for customizing Delete confirm Message for EJ2 ASP.NET MVC? I don't find any documentation...

Reply
Chris Falk Jun 29, 2018

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

Reply
Sathyanarayanamoorthy Eswararao [Syncfusion] Jul 02, 2018

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.

 

       

       

<td>{{>~ForeignKeyvalue(EmployeeID)}}td>

        

       

<td>{{>~formatDate(OrderDate)}}td>

   

 

    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 },

                ]

            });

        });

   

 

type="text/x-jsrender" id="dContent">

       

Order ID:{{:OrderID}}
Customer ID:{{:CustomerID}}
Employee ID:
Freight:{{:Freight}}
OrderDate:

 

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

Sathyanarayanamoorthy Eswararao [Syncfusion] Jul 02, 2018

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.

 

       

       

<td>{{>~ForeignKeyvalue(EmployeeID)}}td>

        

       

<td>{{>~formatDate(OrderDate)}}td>

   

 

    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 },

                ]

            });

        });

   

 

type="text/x-jsrender" id="dContent">

       

Order ID:{{:OrderID}}
Customer ID:{{:CustomerID}}
Employee ID:
Freight:{{:Freight}}
OrderDate:

 

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

Manivel Sellamuthu [Syncfusion] Jul 03, 2018

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:

/n \n ');

//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 = "Delete Confirmation Dialog";    //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>

<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('

Order ID:${OrderID}
Employee ID:${EmployeeID}
Customer ID:${CustomerID}

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

Reply
Add Comment
You must log in to leave a comment

Warning Icon 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.Close Icon