Custom Confirmation Dialog Error When Passing Callback to Dialog Button Click Event

[ISMAIL HAMZAH]

Dear Support,

I'm in process of creating Custom confirmation dialog using dialog control. But find difficulties when passing callback to dialog button. For comparation, I'm creating two other buttons at dialog content template using HTML button and passing callback to their click event is went successfully. My question is: how to pass callback function to click event of dialog button?

Below is my application UI:

Below is my custom confirmation dialog:

@using Syncfusion.EJ2

@{

var confirmanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.None };

}

<div id="container-confirmation-dialog">

<ejs-dialog id="confirmation-dialog"

animationSettings="confirmanimation"

visible="false"

created="confirmationDialogCreated"

isModal="true"

width="400px"

target="#container-confirmation-dialog"

header="Transaction Confirmation"

allowDragging="true"

showCloseIcon="true">

<e-dialog-position X="center" Y="top"></e-dialog-position>

<e-content-template>

<div class="card">

<div class="card-body">

Are you sure want to continue?

</div>

<div class="card-footer">

<button type="button" class="btn btn-secondary close-button" id="confirmationDialogNo">No</button>

<button type="button" class="btn btn-primary save-button" id="confirmationDialogYes">Yes</button>

</div>

</div>

</e-content-template>

<e-dialog-buttons>

<e-dialog-dialogbutton buttonModel="@(new {content = "No"})" id="btnNo"></e-dialog-dialogbutton>

<e-dialog-dialogbutton buttonModel="@(new {content = "Yes", isPrimary = true})" id="btnYes"></e-dialog-dialogbutton>

</e-dialog-buttons>

</ejs-dialog>

</div>

<script>

var confirmationDialog;

function confirmationDialogCreated() {

confirmationDialog = this;

}

function transConfirmation(message, yesCallback, noCallback) {

confirmationDialog.show();

//passing callback to HTML button, working as expected

document.getElementById("confirmationDialogNo").addEventListener('click', function () {

            confirmationDialog.hide();

noCallback();

});

document.getElementById("confirmationDialogYes").addEventListener('click', function () {

            confirmationDialog.hide();

yesCallback();

});

//passing callback to dialog button, always error: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

document.getElementById("btnNo").addEventListener('click', function () {

            confirmationDialog.hide();

noCallback();

});

document.getElementById("btnYes").addEventListener('click', function () {

            confirmationDialog.hide();

yesCallback();

});

}

</script>

and below is how I call my custom confirmation dialog:

        transConfirmation('Are you sure to delete this record cuy?', function () {

            try {

                $.ajax({

                    type: 'POST',

                    url: url,

                    headers: {

                        'RequestVerificationToken': token

                    },

                    contentType: false,

                    processData: false,

                    success: function (res) {

                        $('#grid-container').html(res.html);

                        TransactionMessage(res.message);

                    },

                    error: function (err) {

                        console.log(err)

                    }

                })

            } catch (ex) {

                console.log(ex)

            }

        }, function () {

        });

Thank you in advance,

Ismail

[Vinitha Jeyakumar]

Hi Ismail, 

 

Currently, we are validating your reported query. We will update you the further details in three business days on or before 13^th December 2021. 

 

Regards, 

Vinitha 

 

[Vinitha Jeyakumar]

Hi Ismail,  

 

 

While using dialogButton, you can use click event of dialogButtons to get callback functions which meets your requirement. Please check the code below, 

 

Code snippet: 

<ejs-dialog id="alert_dialog" animationSettings="alertanimation" open="dialogOpen" close="dialogClose" visible="false" created="onLoadalert" target="#target" width="250px" header="Low Battery"> 

            <e-content-template> 

                <div>10% of battery remaining</div> 

            </e-content-template> 

            <e-dialog-buttons> 

                <e-dialog-dialogbutton buttonModel="ViewBag.alertbutton" click="alertBtnClick"></e-dialog-dialogbutton> 

            </e-dialog-buttons> 

        </ejs-dialog> 

<script> 

var alertObj; 

        function onLoadalert() { 

            alertObj = this; 

        } 

function alertBtnClick() { 

            alertObj.hide(); 

        } 

</script> 

 

Regards, 

Vinitha