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.
|
[Child.cshtml]
@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
col.Field("Country").Width("150").Add();
col.Field("State").Width("150").Add();
col.Field("City").Width("150").Add();
}).AllowPaging().GridLines(Syncfusion.EJ2.Grids.GridLine.Both).ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true) .Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<script>
function actionComplete(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
let spinner = ej.popups.createSpinner({ target: args.dialog.element });
// For custom save button
args.dialog.btnObj[0].destroy();
args.dialog.btnObj[0].element.id = "save";
var progressSaveButton = new ej.splitbuttons.ProgressButton({
content: 'Save Record', enableProgress: true, animationSettings: { effect: 'SlideRight' },
spinSettings: { position: 'Center' }, cssClass: 'e-outline e-success', begin: SaveButton
});
progressSaveButton.appendTo('#save');
// For custom cancel button
args.dialog.btnObj[1].destroy();
args.dialog.btnObj[1].element.id = "cancel";
var progressCancelButton = new ej.splitbuttons.ProgressButton({
content: 'Cancel Edit', enableProgress: true, animationSettings: { effect: 'SlideRight' },
spinSettings: { position: 'Center' }, cssClass: 'e-outline e-success', begin: CancelEdit
});
progressCancelButton.appendTo('#cancel');
. . . .
}
</script>
|
|
[Index.cshtml]
@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
. . . .
}).AllowPaging().GridLines(Syncfusion.EJ2.Grids.GridLine.Both).ActionComplete("actionComplete").ActionBegin("actionBegin").
EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true). Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<script>
var flag = true;
function actionBegin(args) {
if (args.requestType == "save" && flag)
args.cancel = true;
}
function actionComplete(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
let spinner = ej.popups.createSpinner({ target: args.dialog.element });
// For custom save button
args.dialog.btnObj[0].destroy();
args.dialog.btnObj[0].element.id = "save";
var progressSaveButton = new ej.splitbuttons.ProgressButton({
content: 'Save Record', enableProgress: true, animationSettings: { effect: 'SlideRight' },
spinSettings: { position: 'Center' }, cssClass: 'e-outline e-success'
});
progressSaveButton.appendTo('#save');
// For custom cancel button
args.dialog.btnObj[1].destroy();
args.dialog.btnObj[1].element.id = "cancel";
var progressCancelButton = new ej.splitbuttons.ProgressButton({
content: 'Cancel Edit', enableProgress: true, animationSettings: { effect: 'SlideRight' },
spinSettings: { position: 'Center' }, cssClass: 'e-outline e-success'
});
progressCancelButton.appendTo('#cancel');
// Cancelling the edit action
document.getElementById('cancel').addEventListener('click', function (args) {
flag = false;
this.closeEdit();
flag = true;
}.bind(this));
// saving the edit action
document.getElementById('save').addEventListener('click', function (args) {
flag = false;
this.endEdit();
flag = true;
}.bind(this));
. . . .
}
</script>
|
