Articles in this section
Category / Section

How to show the confirmation dialog box while save the records in Normal EditMode?

1 min read



We can show the confirmation dialog box while save the records in Normal EditMode using actionBegin event of the Grid. In the actionBegin event we have rendered the ejDialog as like confirmationDialog with ok and cancel button and save the records using endEdit method of the Grid.


The following code example demonstrates how to show the confirmation dialog box while save the records in Normal Edit Mode.


1. Initialize the confirmation DialogBox and render the Grid with actionBegin event .



<div id="confirmationDialog" style="display:none">  
  <div> Are you sure you want to save changes?</div>  
      <input type="button" id="Ok" value="OK" />  
      <input type="button" id="Cancel" value="Cancel" />  





2. Render the Grid.


<div id="Grid"></div>
<script type="text/javascript">
    $(function () {// Document is ready.
            dataSource: window.gridData,
            allowPaging: true,
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: 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] },
            columns: [
                      { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 100},
                      { field: "CustomerID", headerText: "Customer ID", width: 100 },
                      { field: "Freight", headerText: "Freight", width: 100, format: "{0:C}" },
                      { field: "ShipCountry", headerText: "Ship Country", width: 100,  }




         .AllowPaging()    /*Paging Enabled*/
         .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
         .ToolbarSettings(toolbar =>
                    toolbar.ShowToolbar().ToolbarItems(items =>{
         .ClientSideEvents(eve => eve.ActionBegin("begin"))         
         .Columns(col =>{
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
            col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
namespace EJGrid.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            var DataSource = OrderRepository.GetAllRecords();
   = DataSource;
            return View();




<ej:Grid ID="Grid" runat="server" AllowPaging="True">
  <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
    <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
    <ClientSideEvents ActionBegin="begin"/>
               <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True"  Width="100" />                
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100"/>
                <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width="100"/> 
                <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="100"/>                
       public partial class _Default : Page
            protected void Page_Load(object sender, EventArgs e)
                this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;



<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" action-begin="begin">
     <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />
      <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings>
        <e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="100"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="100"></e-column>
        <e-column field="Freight" header-text="Freight" width="100" format="{0:C}"></e-column>
         <e-column field="ShipCountry" header-text="Ship Country" width="100"></e-column>



<div id="confirmationDialog" style="display:none">  
  <div> Are you sure you want to save changes?</div>  
      <input type="button" id="Ok" value="Ok" />  
      <input type="button" id="Cancel" value="Cancel" />  
<ej-grid #grid [dataSource]="gridData" allowPaging="true" (actionBegin)="onactionbegin($event)" [toolbarSettings]="toolbarItems" [editSettings]="editSettings">
        <e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="100"></e-column>
        <e-column field="Freight" headerText="Freight" format="{0:C}" width="100"></e-column>        
        <e-column field="ShipCountry" headerText="Ship Country" width="100"></e-column>
[ts file]
@ViewChild('grid') GridModel: EJComponents<any, any>;
    let flag = true;
   export class GridComponent {
     onactionbegin(e: any){
       if(e.requestType == "save"){
           $("#confirmationDialog").ejDialog({ enableModal: true, showHeader: false, width: 300, minHeight: 20, });           $("#confirmationDialog").ejDialog("open"); 
           $("#Ok").ejButton({ click: function(args){
               var gridobj = $(".e-grid").ejGrid("instance");
                flag = false;
              flag = true; 
           $("#Cancel").ejButton({ click: function(args){


2. In this actionBegin event of ejGrid, we have check the condition with requestType as save and display the confirmation dialog. In confirmation dialogBox we have bound two ejButton as Save and Cancel. When we click on Save button we have saved the record in Grid using endEdit method of ejGrid and when we clicked on cancel button we closed the confirmation dialog.  


<script type="text/javascript">
    var flag = true;
    function begin(args) {
        if (args.requestType == "save") {
            //Based on the flag variable perform/prevent the save operation in Grid  
            if (flag) {
                args.cancel = true; //prevent the default save operation in Grid  
                $("#confirmationDialog").ejDialog({ enableModal: true, showHeader: false, width: 300, minHeight: 20, }); //rendered the confirmation dialog  
                $("#Ok").ejButton({ click: "save" });
                $("#Cancel").ejButton({ click: "cancel" });
    function save() {
         var gridObj = $('#Grid').ejGrid("instance");
        flag = false;
        $("#confirmationDialog").ejDialog("close"); //close the confirmation Dialog  
        flag = true; //set the flag value as true   
    function cancel() {
        $("#confirmationDialog").ejDialog("close"); //close the confirmation Dialog 


Output Screenshot:


Sample Link:-




Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment