【问题标题】:How to alert Delete Sucessfully after Destroy of Kendo Grid?销毁剑道网格后如何提醒删除成功?
【发布时间】:2014-06-03 07:25:35
【问题描述】:

我正在使用 Kendo Grid 来显示数据。现在我知道如何通过剑道网格询问删除确认。现在我想在成功删除记录后显示像删除成功这样的警报。我该怎么做?这是我的剑道网格代码。

    @(Html.Kendo().Grid<RxConnectEntities.DeleteFileDTO>().Name("deleteList")
    .Columns(columns =>
    {
        columns.Bound(p => p.DeleteFaxID).Hidden(true);
        columns.Bound(p => p.FaxName).Width(100).Title("File Name");
        columns.Bound(p => p.PerformedDateTime).Width(75).Title("Archive Date").Format("{0:MM/dd/yyyy}");
        columns.Command(command => { command.Destroy().Text("Move"); }).Width(50);
        columns.Bound(p => p.FilePath).Hidden(true);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("Are you sure want to Move this Finance File?"))
    .Pageable(p => p.PageSizes(true))
        .Scrollable()
        .Sortable()
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
        .Events(events => events.Change("onChange"))
        .Groupable()
    .Filterable(filterable => filterable.Extra(false).Operators(operators => operators.ForString(str => str.Clear().StartsWith("Starts with").Contains("contains").IsEqualTo("Is equal to"))))
    .HtmlAttributes(new { style = "height:738px;" })
        .DataSource(dataSource => dataSource
        .Ajax().ServerOperation(true)
        .PageSize(20)
        .Model(m => m.Id(p => p.DeleteFileID))
        .Read(read => read.Action("GetFileList", "Fax"))
    .Destroy(update => update.Action("MoveFileFromArchiveToQueue", "Operation"))
        ))

【问题讨论】:

  • 您打算如何“删除”该对象?如果您按照 AJAX 执行此操作,则只需发回确认消息并显示。
  • @AndreiV 我正在使用剑道网格的破坏事件进行删除。
  • 命令名是destroy,事件实际上叫remove(技术性)。我需要更多信息。你如何绑定你的数据?您可以在 remove 事件上注册您的“删除功能”,并向服务器发送 AJAX 请求,其中包含您要删除的记录的 ID。在确认您的数据库操作后返回一条消息 (JsonResult)(有些人会争辩说您必须使用 POST,因为您正在修改数据库......)。无论如何,这实际上取决于您的数据如何绑定到网格。
  • @AndreiV 这是我的代码
  • 嗯...您正在使用帮助程序进行删除。我真的不知道MoveFileFromArchiveToQueue 做了什么,特别是它返回了什么。您可以尝试使用remove event。添加一个 JavaScript 函数,看看是否能得到服务器的确认。

标签: jquery asp.net-mvc razor kendo-grid


【解决方案1】:

改成这样:

.Events(events => events.Change("onChange").Remove("YourFunctionForAfterDelete")

然后从那确认...

另一种方法是创建一个自定义命令来删除、使用 ajax 并将成功/错误消息返回到对话框或类似的东西中,这更好,但需要更多的代码和阅读。

columns.Command(commands =>
                      {
                          commands.Edit() data items
                          commands.Custom("Delete").Click("DeleteByAJAX"); // The "destroy" command removes data items
                      }).Width(95);

【讨论】:

    【解决方案2】:

    我尝试了上述方法,但无法使其按需要工作。我改为订阅 onRequestEnd 方法。我有几条需要发送的警报消息。添加记录成功1个,删除记录成功1个,更新记录成功1个。

    我根据正在发生的 CRUD 操作在控制器中填充了一个 ViewBag。

    然后我在视图中检查了 Viewbag 的值,并在页面重新加载时抛出了正确的引导警报...

    @if (ViewBag.Alert == "Success")
    {
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Record has been successfully added.</strong>
    </div>
    }
    
    @if (ViewBag.Alert == "Deleted")
    {
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Record has been successfully deleted.</strong>
    </div>
    }
    
    @if (ViewBag.Alert == "Updated")
    {
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Record has been successfully updated.</strong>
    </div>
    }
    

    当网格添加记录、更新记录或删除记录时,我能够通过使用以下 javascript 检测操作来重新加载页面....

    <script>
    function onRequestEnd(e)
    {
        var operationType = e.type;
    
        if(operationType == "destroy" || operationType == "create" || operationType == "update")
        {
            location.reload();
        }
    }
    </script>
    

    【讨论】:

      猜你喜欢
      • 2018-06-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多