Dialog Template with additional actions

Question

Hello, I am trying to add another button (something like Save & Notify) to the dialog entry screen but can't seem to figure it out. Can you send me an example?

Manivel Sellamuthu · Accepted Answer

Hi Jessica, 

Greetings from Syncfusion support. 

Query: “I am trying to add another button (something like Save & Notify) to the dialog entry screen but can't seem to figure it out?” 

To achieve the above requirement we suggest you to use the actionComplete event of the Grid. In actionComplete event we check the condition with requestType and add the button dynamically to the edit dialog. 

Please refer the below code example and sample for more information. 





    function actionComplete(args) { 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
        // creating a button model 
            var button = { 
                'click': () => { alert('Here you can perform the actions for the Save & Notify button') }, 
                buttonModel: { 
                    content: 'Save & Notify', 
                } 
            }; 
            // inserting the button object into the Dialog button 
            args.dialog.buttons.unshift(button); 
            args.dialog.refresh(); 
            args.dialog.element.style.width = "auto" 
                          . . .  

Sample: https://www.syncfusion.com/downloads/support/forum/158287/ze/Adding_additional_action_in_dialog198397085.zip 

Please let us know, if you need further assistance. 

Regards, 
Manivel

Jessica Goodrich · Answer

Hi Manivel,I am running into a weird error. This works in my dummy code, but when I add it to my real project it gives me this error:Then when I try to click Cancel, I get the same error and my dialog box turns into this and I can no longer get anything to work:Have you ever come across this before or any ideas on what is going wrong? It works in my simplified code, but not on an identical page in my more complex project.

Manivel Sellamuthu · Answer

Hi Jessica, 

Thanks for your update. 

We have not faced the mentioned issue in the given sample or before. 

Could you please share the below details, which will be helpful for us to validate further about issue. 

Share the code for actionComplete event of your real project(adding the action button)
If possible, try to replicate the reported issue in our given sample
Share the Syncfusion packages version

Regards, 
Manivel

Jessica Goodrich · Answer

Thanks for those ideas. I forgot I had ej2.min.js local on my project and tried updating it. It is working now with the code you first sent. Thanks again!

Jessica Goodrich · Answer

Okay. Now I am stuck on two things:1) I referred to this to make a hover title for the new button, but it is not working. Is there something I am missing?https://ej2.syncfusion.com/aspnetcore/documentation/button/how-to/tooltip-for-button/2) I am having trouble finding how to connect the new button back to crud actions. I want the button to do the same thing as the current Save button, with one flag change. This is what the Save button does:adaptor="RemoteSaveAdaptor" crudUrl="/ObjectiveDataEntry/PotableWaterAddUpdate?objectiveId=@Model.Objective.ObjectiveId&submitStatus=false"And this is what I want the new Save & Submit Status button to do:adaptor="RemoteSaveAdaptor" crudUrl="/ObjectiveDataEntry/PotableWaterAddUpdate?objectiveId=@Model.Objective.ObjectiveId&submitStatus=true"This is my grid:

This is my actionComplete function:function actionComplete(args) { if (args.requestType === 'beginEdit' || args.requestType === 'add') { var dialog = args.dialog; dialog.header = args.requestType === 'beginEdit' ? 'Data for ' + args.rowData['FiscalYear']['Description'] + ' ' + args.rowData['ReportingPeriod']['Description'] : 'New Data Entry'; var button = { 'click': () => { alert('This will do fancy stuff, but right now it does nothing.'); console.log(args.rowData); }, buttonModel: { content: 'Save & Submit Status', title: 'This will automatically create a Status Update for this data based on predefined metrics and send a notification to the EMS POC team to review the data. If all the data has not been entered yet, use Save instead and come back to submit the status later.', cssClass: 'btn-outline-primary' } }; args.dialog.buttons.unshift(button); args.dialog.refresh(); args.dialog.element.style.width = "40%" } if (args.requestType === 'save' || args.requestType === 'cancel') { var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; for (const column of grid.columns) { if ((column).allowEditing === false && (column).field !== undefined && (column).field !== "GridId" && (column).field !== "ObjectiveId") { (column).visible = true; } else if ((column).field === undefined && (column).columns !== undefined) { for (const subColumn of (column).columns) { var headerTextSplit = (subColumn.headerText).split(": "); subColumn.headerText = headerTextSplit[1]; if ((subColumn).allowEditing === false) { (subColumn).visible = true; } } } } grid.refresh(); } }

Manivel Sellamuthu · Answer

Hi Jessica, 

Thanks for your update. 

Query:1 I referred to this to make a hover title for the new button, but it is not working. Is there something I am missing? 
 
Since we are adding the button dynamically in the dialog, we suggest you to use the below way to add title for the button. 





  function actionComplete(args) { 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
            var button = { 
                title: "asdasdasdasda", 
                'click': () => { alert('Here you can perform the actions for the Save & Notify button') }, 
                buttonModel: { 
                    content: 'Save & Notify', 
                } 
            }; 
            args.dialog.buttons.unshift(button); 
            args.dialog.refresh(); 
            args.dialog.element.style.width = "auto"; 
            args.dialog.getButtons()[0].element.title = "Here you can add the title";  
 
Query: 2 I am having trouble finding how to connect the new button back to crud actions. I want the button to do the same thing as the current Save button, with one flag change. 
 
From this query ,we suspect that you want to change the remote Save Adaptor’s crudUrl dynamically. If so we would like to inform you that it is not feasible to achieve your requirement. If we misunderstood your query or this is not your exact requirement, please explain more about your requirement. 

Regards, 
Manivel

Jessica Goodrich · Answer

Hi Manivel,#1 Thank you. That worked. #2 That's not quite what I wanted. I don't want to change the crudurl because I still want that to work with the out-of-the-box Save button.I am just stuck trying to figure out how to send the data to my controller from my new button. So I was just showing how I want this button to do almost the same thing as the Save button. So I guess my question is: how do I get the data from the dialog and send it to my controller from my newly created button?Thanks!

Manivel Sellamuthu · Answer

Hi Jessica, 

Thanks for clarifying your requirement. 

Based on your query we found that you want to send the added or edited data to server while clicking the newly added button. To achieve your requirement we suggest you to use the endEdit method of the Grid.  

Please refer the below code example and API for more information. 





function actionComplete(args) { 
        var grid = this; 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
            var button = { 
                title: "asdasdasdasda", 
                'click': () => { 
                    alert('Here you can perform the actions for the Save & Notify button'); 
// here we are invoking the endEdit method of the Grid 
                    grid.endEdit(); 
                }, 
                buttonModel: { 
                    content: 'Save & Notify', 
                } 
            }; 
            args.dialog.buttons.unshift(button); 
            args.dialog.refresh(); 
            args.dialog.element.style.width = "auto"; 

API: https://ej2.syncfusion.com/documentation/api/grid/#endedit 

Please let us know, if you need further assistance. 

Regards, 
Manivel

Jessica Goodrich · Answer

Awesome, thanks. I created a parameter with the grid's query function in order to pass a different variable to the server based on the button that was clicked. It works. Is that a good way to do it or should I be doing something else?Grid:

Javascript:function actionComplete(args) { if (args.requestType === 'beginEdit' || args.requestType === 'add') { var grid = this; var dialog = args.dialog; dialog.header = args.requestType === 'beginEdit' ? 'Data for ' + args.rowData['FiscalYear']['Description'] + ' ' + args.rowData['ReportingPeriod']['Description'] : 'New Data Entry'; var button = { 'click': () => { grid.query.params.filter((e) => e.key == 'submitStatus')[0].value = true; grid.endEdit(); }, buttonModel: { content: 'Save & Submit Status', id: 'SaveAndSubmitStatusButton', cssClass: 'btn-outline-primary !important' } }; args.dialog.buttons.unshift(button); args.dialog.refresh(); args.dialog.element.style.width = "40%"; args.dialog.getButtons()[0].element.title = "This will automatically create a Status Update for this data based on predefined metrics and send a notification to the EMS POC team to review the data. If all the data has not been entered yet, use Save instead and come back to submit the status later."; args.dialog.getButtons()[0].element.id = "SaveAndSubmitStatusButton"; $("#SaveAndSubmitStatusButton").attr("data-toggle", "tooltip"); $("#SaveAndSubmitStatusButton").attr("data-placement", "top"); $("#SaveAndSubmitStatusButton").tooltip(); } if (args.requestType === 'save' || args.requestType === 'cancel') { var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; grid.query.params.filter((e) => e.key == 'submitStatus')[0].value = false; for (const column of grid.columns) { if ((column).allowEditing === false && (column).field !== undefined && (column).field !== "GridId" && (column).field !== "ObjectiveId") { (column).visible = true; } else if ((column).field === undefined && (column).columns !== undefined) { for (const subColumn of (column).columns) { var headerTextSplit = (subColumn.headerText).split(": "); subColumn.headerText = headerTextSplit[1]; if ((subColumn).allowEditing === false) { (subColumn).visible = true; } } } } grid.refresh(); } }

Manivel Sellamuthu · Answer

Hi Jessica, 

Thanks for your update. 

We are happy to hear that the provided suggestion helped. 

We checked the attached code example and it is the good way of dynamically changing the addParams of the grid query value based on the normal save button click and newly added button click.  

Please let us know, if you need further assistance. 

Regards, 
Manivel