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

Asp.net mvc 4 创建自定义命令以在剑道UI网格(MVC)中展开客户端详细信息模板,asp.net-mvc-4,kendo-ui,kendo-grid,Asp.net Mvc 4,Kendo Ui,Kendo Grid,我的网格中有一个嵌套的网格,它工作得很好,但是客户端不喜欢使用左边的箭头,并要求添加一个按钮来显示子网格 剑道网站上的例子展示了如何自动打开第一行,我只想用一种方法从自定义控件扩展网格,就像左选择器那样 我已经使用了自定义命令,它执行了示例代码,但我只需要一些javascript帮助,以使其适用于当前行 columns.Command(command => { command.Edit().Text("Edit").UpdateT

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

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

我已经使用了自定义命令,它执行了示例代码,但我只需要一些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提供的解决方案,以使其仅对按钮而不是整行起作用

我更喜欢使用函数showBrandsForegency而不是自定义函数的解决方案,但这样做可以:

$(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);
        }
    });
});

您可以尝试以下方法:

$("#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元素。在本例中,这是单击的表行


这里是一个现场演示:

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

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

谢谢你的回复。我不得不对它做了一些修改,这不是最干净的解决方案,但它确实做到了。对于所需的功能来说太复杂了。如果你需要简单有效的解决方案,请看我的答案。