Custom Dialog Template footer buttons

[Huy Ly]

Hi Team,

How can i replace the default (Save and cancel) with my own buttons  (e.g. ProgressButton) and data source urls.

[Thavasianand Sankaranarayanan]

Hi Huy, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement. You can achieve your requirement by using actionComplete event of the Grid based on the requestType as ‘beginEdit’ and ‘add’. 

 

Refer the below code example. 

[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> 

Note: if you are placing custom buttons in footer instead of save, cancel then we suggest you to handle the save and cancel action by yourself. 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#actioncomplete 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#endedit 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/edit/#closeedit 

Regards, 

Thavasianand S. 

[Huy Ly]

Hi Team,

Many thanks for your help! It works as expected. But i want to replace the default event listener of these buttons. It keep calling the endEdit event of the grid when i click on it and use the UpdateUrl to save to server.

Sorry for my bad English.

[Thavasianand Sankaranarayanan]

Hi Huy, 

Thanks for your update. 

We can achieve your requirement by using the actionBegin event of Grid and in this we have maintained a flag variable to do operations in the corresponding progress buttons. 

Refer the below code example. 

[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> 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#actionbegin 

Regards, 

Thavasianand S. 

[Huy Ly]

Sorry for the late reply. Your solution is working perfectly. Many thanks.

[Thavasianand Sankaranarayanan]

Hi Huy, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.