Kendo Confirmation is undefined after clicking on "Cancel" button

Question

I saw similar questions but unfortunately did not find an answer I was looking for.

I have Kendo Confirmation dialog that I need to be displayed under a certain condition when clicking on an "Update" button:

<button class="k-button k-primary" id="btnSave" type="button"  @*name="action:Save"*@ onclick="CheckSplitCondition()">Update</button>

function CheckSplitCondition()
{
    var newResolvedAmount = $('#ResolvedAmount').val();

    var isSplit;
    var diff = @Model.Amount - newResolvedAmount;
    var msg = "Difference between Resolve Amount and Ticket Amount is:" + diff + ".\nThis Amount is going to be put in newly created ticket.\nPress 'OK' to proceed, press 'Cancel' otherwise.\n";

    var dispResult = $("#displayResults");
    if ((Math.abs(newResolvedAmount) <= Math.abs(@Model.Amount)) && newResolvedAmount != 0) {
        //$("#displayResults").css("display", "block");
        $("#displayResults").kendoConfirm({
            width: "400px",
            title: "Alert",
            closable: true,
            modal: true,
            content: 'Are you sure?',
            okText: "OK"
        }).data("kendoConfirm").result.done(function () { SaveData(); }).fail(function () { alert('2') });

    }
    else {
        SaveData();
    }
}

After clicking on "Cancel", confirmation box is not showing and I have JavaScript error telling

"Unable to get property 'result' of undefined or null reference"

Not sure why that happens.

Answer 1

Kendo Confirm is based on Kendo Dialog, which according to the documentation removes the HTML elements from the DOM when it is destroyed:

destroy

Destroys the dialog and its modal overlay, if necessary. Removes the widget HTML elements from the DOM.

This is why it only works the first time around, and you receive a null reference on the second pass because the <div> no longer exists. This behaviour is typical of Kendo widgets which have been destroyed.

The quickest solution would be to call the kendo.confirm() method, as in this demo. Unfortunately, that is a very simple helper method which only allows you to specify the message text as an argument.

Alternatively, you could use jQuery to create a new <div> each time, and then turn that into a Dialog like so (which retains the flexibility to completely customise the Dialog):

var confirmDialog = $('<div />').kendoConfirm({
    content: "Are you sure that you want to proceed?",
    title: "Custom Title"
}).data('kendoConfirm').open();

confirmDialog.result.then(function () {
    kendo.alert("You chose the Ok action.");
}, function () {
    kendo.alert("You chose to Cancel action.");
});

Hope this helps.