Category / Section
How to show the confirmation dialog box while save the records in Normal EditMode?
1 min read
Solution:
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 .
HTML
<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" /> </div>
JS
2. Render the Grid.
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
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] },
actionBegin:"begin",
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, }
],
});
});
</script>
MVC
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging() /*Paging Enabled*/
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.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);
});
})
.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("Freight").HeaderText("Freight").Width(100).Format("{0:C}").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
}))
[Controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP
[aspx]
<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"/>
<Columns>
<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"/>
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;
this.OrdersGrid.DataBind();
}
}
ASP.NET Core
<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-columns>
<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>
</e-columns>
</ej-grid>
Angular
<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" />
</div>
<ej-grid #grid [dataSource]="gridData" allowPaging="true" (actionBegin)="onactionbegin($event)" [toolbarSettings]="toolbarItems" [editSettings]="editSettings">
<e-columns>
<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>
</e-columns>
</ej-grid>
[ts file]
@ViewChild('grid') GridModel: EJComponents<any, any>;
let flag = true;
export class GridComponent {
onactionbegin(e: any){
if(e.requestType == "save"){
if(flag){
e.cancel="true";
$("#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;
gridobj.endEdit();
$("#confirmationDialog").ejDialog("close");
flag = true;
}
});
$("#Cancel").ejButton({ click: function(args){
$("#confirmationDialog").ejDialog("close");
}
});
}
}
}
}
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.
JS
<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
$("#confirmationDialog").ejDialog("open");
$("#Ok").ejButton({ click: "save" });
$("#Cancel").ejButton({ click: "cancel" });
}
}
}
function save() {
var gridObj = $('#Grid').ejGrid("instance");
flag = false;
gridObj.endEdit();
$("#confirmationDialog").ejDialog("close"); //close the confirmation Dialog
flag = true; //set the flag value as true
}
function cancel() {
$("#confirmationDialog").ejDialog("close"); //close the confirmation Dialog
}
</script>
Output Screenshot:
Sample Link:- https://jsplayground.syncfusion.com/5cehd4ry
