asp.net mvc Kendo Grid confirmation dialog before the update

Question

I'm trying to add a confirmation dialog before updating a record in the DB. So I included .Events(e => e.Save("onSave")).

@(Html.Kendo().Grid<VIEWMODEL>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Description);
        columns.Command(command =>
        {
            command.Edit();                                   
        });

    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(m =>
        {
            m.Id(mr => mr.Id);
        })
        .Update(upd => upd.Action("Action", "Controller"))
    )
    .Events(e => e.Save("onSave"))
)

<script>
    function onSave(e) {
        var grid = $("#grid").data("kendoGrid");
        $('#confirmDialog').data("kendoDialog").setOptions({
            title: "Edit Confirmation",
            content: "Are you sure you want to edit this Item ?"
        });
        $('#confirmDialog').data("kendoDialog").open();
    }

    function confirmEdit(e) {
        var grid = $("#grid").data("kendoGrid");
        var tr = $(e.currentTarget).closest("tr");        
        $('#confirmDialog').data("kendoDialog").close();
    }

    function cancelEdit(e) {
        $('#confirmDialog').data("kendoDialog").close();
    }

</script>

Confirmation Dialog

@(Html.Kendo().Dialog()
    .Name("confirmDialog")
    .Modal(true)
    .Visible(false)
    .Actions(a =>
    {
        a.Add().Text("No").Action("cancelEdit");
        a.Add().Text("Yes").Action("confirmEdit").Primary(true);
    })
)

However, this confirmation appears after saving the values. How do I make this appear before saving to DB?

Answer 1

In the Save event, you need to call e.preventDefault to prevent the save from taking place. More information here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/save

Something like this:

function onSave(e) {
    e.preventDefault(); // prevent save from taking place

    var grid = $("#grid").data("kendoGrid");
    $('#confirmDialog').data("kendoDialog").setOptions({
        title: "Edit Confirmation",
        content: "Are you sure you want to edit this Item ?"
    });
    $('#confirmDialog').data("kendoDialog").open();
}

Now, you will need to do a bit more work to actually perform the save if the user confirms the save. One way would be to call sync on the grid datasource in your confirmEdit function. Something along what is detailed here: https://www.telerik.com/forums/grid-save-event. (not putting code here since this wasn't part of your question)

A different, possibly simpler, approach may be to use a confirm dialog directly in your onSave function and only call preventDefault() when the user cancels in the dialog, that way you don't have to call sync on the datasource when the user confirms, you can just let the save happen. This would look something like this:

function onSave(e) {
    // kendo confirm info https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/confirm
    kendo.confirm("Are you sure you want to edit this Item?")
        .done(function() {
            console.log("User accepted");
        })
        .fail(function() {
            console.log("User rejected");
            e.preventDefault(); // cancel save
        });
}