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

Question

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

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

Answer 1

在保存事件中，您需要调用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 confirmation dialog before the update

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc