更新前的asp.net mvc Kendo Grid确认对话框

问题描述

我正在尝试在更新数据库中的记录之前添加一个确认对话框。所以我包括了 .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>

确认对话框

 @(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);
      })
      )

但是，保存值后会出现此确认。如何在保存到数据库之前显示它？

解决方法

在 Save 事件中，您需要调用 e.preventDefault 以防止发生保存。更多信息请访问：https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/save

像这样：

    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();
    }

现在，如果用户确认保存，您将需要做更多的工作来实际执行保存。一种方法是在您的 confirmEdit 函数中对网格数据源调用同步。此处详细介绍的内容：https://www.telerik.com/forums/grid-save-event。（不把代码放在这里，因为这不是你问题的一部分）

另一种可能更简单的方法可能是直接在您的 onSave 函数中使用确认对话框，并且仅在用户在对话框中取消时调用 preventDefault()，这样您就不必在用户调用数据源时调用同步确认，您可以让保存发生。这看起来像这样：

    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
            });
    }

asp.net-mvc kendo-asp.net-mvc kendo-grid kendo-ui