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很棒，但我需要更多的例子。

Answer 1

感谢您的回复。我们已经通过一些搜索等来解决这个问题。

首先在kendoui网站上“赞美”到“this post”，因为它指出了我正确的方向。

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

在。网格的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");
}

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

感谢。

Answer 2

听起来您正在寻找批量编辑功能。看一下这个Kendo batch editing example。您可以控制是否批量处理DataSource。

KendoUI网格自定义工具栏删除所选项目的操作

2 个答案: