创建自定义命令以在Kendo UI Grid(MVC)中扩展客户端详细信息模板

Question

我的网格中有一个嵌套网格,它工作得很好,但客户端不喜欢使用左边的箭头,并要求添加一个按钮以显示子网格.

Kendo网站上的示例显示了如何自动打开第一行,我只想要一种从自定义控件扩展网格的方法,就像左选择器一样.

我有自定义命令工作,它执行示例代码,但我只需要一些帮助,使其适用于当前行所需的javascript.

columns.Command(command => 
            { 
                command.Edit().Text("Edit").UpdateText("Save"); 
                command.Destroy().Text("Del");
                command.Custom("Manage Brands").Click("showBrandsForAgency");

和js打开第一行的标准示例:

function showBrandsForAgency(e) {
    this.expandRow(this.tbody.find("tr.k-master-row").first());
}

请给我一个扩展行点击所需的js而不是第一行的帮助吗？

*编辑* 修改了Atanas Korchev提供的解决方案,以使其仅在按钮而不是整行上工作.

我更喜欢使用showBrandsForAgency函数而不是自定义函数的解决方案,但这可以完成这项工作:

$(document).ready(function () {

    $("#grid").on("click", "a", function (e) {
        var grid = $("#grid").data("kendoGrid");
        var row = $(this).parent().parent();

        if (row.find(".k-icon").hasClass("k-minus")) {
            grid.collapseRow(row);
        } else {
            grid.expandRow(row);
        }
    });
});

Answer 1

你可以尝试这样的事情:

$("#grid").on("click", "tr", function(e) {
  var grid = $("#grid").data("kendoGrid");

  if ($(this).find(".k-icon").hasClass("k-minus")) {
    grid.collapseRow(this);
  } else {
    grid.expandRow(this);
  }
});

在函数上下文中使用jQuery(通过this关键字可用)是触发事件的DOM元素.在这种情况下this是单击的表行.

这是一个现场演示:http://jsbin.com/emufax/1/edit