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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Dialog Template footer buttons

Thread ID:

Created:

Updated:

Platform:

Replies:

147626 Sep 18,2019 12:57 AM UTC Oct 22,2019 11:05 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Huy Ly
Asked On September 18, 2019 12:57 AM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On September 18, 2019 10:55 AM UTC

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. 




Regards, 
Thavasianand S. 


Huy Ly
Replied On September 19, 2019 02:51 AM UTC

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 [Syncfusion]
Replied On September 20, 2019 12:44 PM UTC

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. 


Regards, 
Thavasianand S. 


Huy Ly
Replied On October 22, 2019 08:59 AM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 22, 2019 11:05 AM UTC

Hi Huy, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon