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

Question

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

在剑道网站上的例子显示了如何自动打开第一行，我只是想要一种方式来扩展网格从一个自定义控件在相同的方式，左边选择器做到这一点。

我已经得到了自定义命令的工作，它执行样例代码，但我只需要一些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展开行点击，而不是第一行?

* EDIT *修改了由Atanas korchestrv提供的解决方案，以使其仅对按钮而不是整行工作。

我更喜欢使用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);
  }
});

当在函数上下文(通过this关键字可用)上使用jQuery时，是触发事件的DOM元素。在本例中，this是被单击的表行。

下面是一个实时演示:http://jsbin.com/emufax/1/edit

Answer 2

相同的结果只是更简单、更快、更有效:

$("#grid").on("click", "tr", function () {
    $(this).find("td.k-hierarchy-cell .k-icon").click();
});