如何在单击 Kendo 网格每行时调用单个函数

Question

我有一个 Kendo 网格“mysubmissionsGrid”，我需要在通过单击或双击单击每一行时调用一个函数。我怎样才能做到这一点？

<div class="col-xs-12 col-nopadding-left col-nopadding-right" style="padding-bottom:20px;">
                        <!-- start my submissions grid -->
                        <div kendo-tooltip k-options="toolTipOptions">
                            <div data-grid-id="mysubmissionsGrid" id="mysubmissionsGrid" kendo-grid="mysubmissionsGrid" k-options="mysubmissionsGridOptions()">
                            </div>
                        </div>
                        <!-- end my submissions grid -->
                    </div>

这是我在用户单击每个 Kendo 网格行时尝试调用的函数 -

function showDetails(e) {
            var grid = $("#mysubmissionsGrid").data("kendoGrid");
            $(grid.tbody).on("click", "td", function (e) {
                var result;
                var row = $(this).closest("tr");
                var rowIdx = $("tr", grid.tbody).index(row);
                var colIdx = $("td", row).index(this);
             });
}

这是我的 .js 文件

$scope.mySubmissionGridModel = {};

$scope.mysubmissionsGridOptions = function () {
    return {
        dataSource: $scope.generateMySubmissionDataSource(),

        autoBind: false,
        editable: false,
        filterable: true,
        groupable: true,
        pageable: {
            pageSizes: [10, 15, 20, 50, "all"],
            numeric: false,
            change: function (e) {
                changePage(e, "mysubmissionsGrid");
            }
        },
        reorderable: true,
        resizable: true,
        scrollable: true,
        sortable: true,
        toolbar: ['excel'],
        excel: {
            allPages: true,
            fileName: "MySubmissions.xlsx"
        },
        columns: $scope.getMySubmissionColumns(),
        filterMenuInit: function (e) {
            $scope.filterMenuInit(e, "MySubmissionsGrid");
        }
    };
};

这里是 getMySubmissionColumns 配置。看起来由于某种原因，如果我单击该提交按钮并接下来单击该行 showDetails() 会被正确调用，但不确定为什么第一次它永远不会被调用。有什么想法吗？

 $scope.getMySubmissionColumns = function () {
            var regularColumns = [
                {
                    headerTemplate: "<input class='checkboxall' type='checkbox' title='Select All' onchange='selectAllRows(\"mysubmissionsGrid\")' />",
                    hidden: true,
                    template: "<input class='checkbox' type='checkbox' onchange='selectRow(\"mysubmissionsGrid\")' /> <br> <input class='submit' type='submit' value='Details' onclick='showDetails(\"mysubmissionsGrid\")' />",
                    width: "130px"
                },
                {
                    attributes: { "class": "subgrid-datacell" }, headerAttributes: { "class": "subgrid-headercell" },
                    hidden: false,
                    title: "Details #",
                    width: "90px",
                    template: "<input class='submit' type='submit' value='Details' onclick='showDetails(\"mysubmissionsGrid\")' />",
                },
                {
                    attributes: {"class":"subgrid-datacell"}, headerAttributes: {"class":"subgrid-headercell"},
                    field: "SubmissionCode",
                    title: "ID #",
                    hidden: true,
                },
                {
                    attributes: {"class":"subgrid-datacell"}, headerAttributes: {"class":"subgrid-headercell"},
                    field: "Title",
                    title: "Title",
                    hidden: true,
                    template: "<a href='/Submission/EditSubmission/#=SubmissionID#'>#=Title#</a>",
                },
                {
                    attributes: {"class":"subgrid-datacell"}, headerAttributes: {"class":"subgrid-headercell"},
                    field: "EntityOrganization",
                    title: "Entity & Organization",
                    hidden: true,
                },
                {
                    attributes: {"class":"subgrid-datacell"}, headerAttributes: {"class":"subgrid-headercell"},
                    field: "SubmitterActionRequired",
                    title: "Submitter Action Required",
                    hidden: true,
                }
    ];

Answer 1

终于我找到了答案，以实现我所寻找的。我使用了 selectable: true, change: function (e) {} 并调用了 showDetails() 函数。像这样 -

$scope.mysubmissionsGridOptions = function () {
        return {
            dataSource: $scope.generateMySubmissionDataSource(),

            autoBind: false,
            editable: false,
            filterable: true,
            groupable: true,
            pageable: {
                pageSizes: [10, 15, 20, 50, "all"],
                numeric: false,
                change: function (e) {
                    changePage(e, "mysubmissionsGrid");
                }
            },
            selectable: true,
            change: function (e) {
                // Get your row's data
                var selectedRows = this.select();
                var selectedDataItems = [];
                for (var i = 0; i < selectedRows.length; i++) {
                    var dataItem = this.dataItem(selectedRows[i]);
                    showDetails(dataItem);
                }
            },
            reorderable: true,
            resizable: true,
            scrollable: true,
            sortable: true,
            toolbar: ['excel'],
            excel: {
                allPages: true,
                fileName: "MySubmissions.xlsx"
            },
            columns: $scope.getMySubmissionColumns(),
            filterMenuInit: function (e) {
                $scope.filterMenuInit(e, "MySubmissionsGrid");
            }
        };

如何在单击 Kendo 网格每行时调用单个函数

How to call a Single function on clicking Kendo grid each row

javascript

jquery

events

angularjs

kendo-grid