Kendo ui 网格每行上有一个按钮，可扩展详细视图

Question

我正在使用 Angular 和 Kendo ui Grid。我在每一行都有一个自定义按钮，我需要将其绑定到扩展详细视图的函数。下面是网格选项。 请帮忙

   $scope.mainGridOptions = {
        dataSource: financialYearsDataSource(),
        sortable: true,
        selectable: true,
        columnMenu: true,
        columns: [

            { field: "FinYearName", title: "Year Name", width: "150px" },
            {field: "StartDate", title: "*Start Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
            {field: "EndDate", title: "*End Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
            {field: "Remarks", title: "*Remarks", editor: descriptionEditor, hidden:true},
            {
                command: [
                    {name: "edit"},
                    {name: "destroy"},
                    {
                        text: " Expand/Collapse",
                        click: $scope.expandToggle,
                        className: "fa fa-map-marker"
                    },
                ], title: " ", width: "300px"
            }],

        editable: {
            mode: "popup"
        },
        pageable: {
            pageable: true,
            refresh: true
        },
        detailExpand: function (e) {
            this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
        }

    };

这里是需要进行切换的切换函数

$scope.expandToggle = function (e) {
        e.preventDefault();
        $scope.myGrid.expandRow($(this));
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));}

这是一个jsfiddle演示：http://jsfiddle.net/akimaina/ay3vv2cm/2/

Answer 1

我已经更新了你的小提琴。请检查是否解决了。

http://jsfiddle.net/ay3vv2cm/3/

$("#grid").on("click",".clsExpand", function(e){
   $("#grid").data("kendoGrid").expandRow($(e.currentTarget).closest("tr"));    
});

Answer 2

这对我使用 JQuery 和 Kendo UI v2023.2.829 有用：

网格行模板：

<small class="text-muted site-link show-details">details</small>

JQuery 处理程序：

$(document).on("click", ".show-details", function() {
  // find cell with expland button
  var $td = $(this).closest("tr").find("td.k-hierarchy-cell");
  // find and click expand button
  $td.find("a").click();
});