grid - KendoUI Grid 自定义工具栏操作以删除所选项目

Question

我正在尝试向我的 Kendo UI Grid 添加一个新的自定义工具栏操作，但我不知道如何获得所需的行为。

我需要一个可以单击的按钮，该按钮将调用一个操作方法并传入网格中选定项目的集合，以便我可以进行批量删除（或针对所有记录的其他操作）

任何人都可以帮忙吗？

目前我有： -

.ToolBar(toolbar =>
{
    toolbar.Custom().Action("Users_DeleteSelected", "Users").Text("Delete Selected");
})

这会调用我的方法： -

public ActionResult Users_DeleteSelected([DataSourceRequest] DataSourceRequest request)
{
    // We need the list of selected UI items *here* so we can delete them - but how
    ...???

    // Just redirect for now, we need to test getting the list of selected items here...
    RedirectToAction("Index");
}

因此，如果我在网格中“选择”了多个项目，我想以某种方式调用类似于上面的方法（Users_DeleteSelected）并将其传递到要删除的项目列表中，然后在删除完成后重定向到索引.

** 这可能不仅仅与删除有关 - 将来可能需要其他几个适合相同方法的功能 - 例如，作业列表上的“标记为完成”。

我猜也许 DataSourceRequest 不是要走的路，也许我需要添加一些客户端代码来以某种方式组装所选项目的列表。

KendoUI 很棒，但我需要更多示例。

score 3 · Accepted Answer

感谢您的友好回复。我们已经通过一些搜索等找到了它。

首先“赞”这篇文章对 kendoui 网站上的

事实证明，这就是我们需要的：-

在里面。网格的cshtml文件...

// .... Other grid stuff
.ToolBar(toolbar =>
{
    toolbar.Custom().Text("Test Button").Url("#").HtmlAttributes(new { @class = "test-button" });
})

// And then also...
$(document).ready(function () {
    $(".test-button").click(testFunction)
})

// And finally
function testFunction(e) {
    kendoConsole.log("Items Selected");

    e.preventDefault();
    var grid = $("#Grid").data("kendoGrid");
    var selection = [];

    grid.select().each(
        function () {
            var dataItem = grid.dataItem($(this));
            selection.push(dataItem);
        }
    );

    $.ajax({
        type: "POST",
        url: "Users/Users_DeleteSelected",
        data: JSON.stringify({ items: selection }),
        dataType: "html",
        contentType: "application/json; charset=utf-8",
        success: function (form) {
            document.open();
            document.write(form);
            document.close();
        }
    });
};

然后在控制器中我们只需： -

[HttpPost]
public ActionResult Users_DeleteSelected(List<UserViewModel> items)
{
    // Stub to redirect for now
    return RedirectToAction("Index");
}

就是这样。当前在网格中选择的所有项目都将发送回正确的操作方法和完成的工作。

谢谢。

score 1 · Accepted Answer

听起来您正在寻找批量编辑功能。看看这个剑道批量编辑示例。您可以控制是否在 DataSource 上进行批处理。

grid - KendoUI Grid 自定义工具栏操作以删除所选项目

2 回答 2

Related

Reference