Question

我有以下代码。我试图在＆＃34;编辑＆＃34;在此网格上单击按钮。但到目前为止没有任何反应。我做错了什么或错过了什么？

 that.summaryGrid = function (grid) {
        return new $(grid).kendoGrid({
            columns: [
                { field: "ReviewId", hidden: true },
                { field: "PersonId", hidden: true },
                {
                    template: function (e) {
                        if (e.EmployeeMiddleName == null) {
                            e.EmployeeMiddleName = "";
                        }
                        return e.EmployeeLastName + ", " + e.EmployeeFirstName + " " + e.EmployeeMiddleName
                    },
                    title: "Name",
                    width: 160,
                    sortable: true
                },
                { field: "ReviewStatusText", title: "Status", width: 150, sortable: true },
                {
                    template: function (e) {
                        if (e.ManagerMiddleName == null) {
                            e.ManagerMiddleName = "";
                        }
                        return e.ManagerLastName + ", " + e.ManagerFirstName + " " + e.ManagerMiddleName
                    },
                    title: "Manager",
                    width: 160,
                    sortable: true
                },
                { field: "ModifiedDate", title: "Last Modified Date", width: 150, sortable: true },
                {
                    template: '<button type="button" class="k-button k-grid-edit"><i class="fa fa-pencil"></i> Edit</button><button type="button" class="k-button k-grid-view"><i class="fa fa-search"></i> View</button>',
                    title: "",
                    width: 135,
                    sortable: true,
                    name: "edit",
                    click: function (e) {
                        e.preventDefault();
                        alert("works");

                        //var dataItem = this.dataItem($(e.currentTarget).closest("tr"));


                    }
                },
            ],

            dataSource: that.viewModel.preformanceSummaryDataSource(grid === "#employeeGrid" ? false : true),
            scrollable: false,
            sortable: true,
            pageable: true,
            selectable: "row",
            change: function (e) {

                    //TODO

            },
            dataBound: function (e) {

                //TODO
            }
        });
    };

我原本希望它显示我创建的html模板，但在此之前我尝试编辑点击事件才能工作。有什么想法吗？

Answer 1

您可以将其添加到命令列中，如：

{ field: "ModifiedDate".... },
{ command: { text: "Edit", click: edit}, title: " ", width: "180px" }]
                    }).data("kendoGrid");


function edit(e) {
                   }

您可以在此处查看完整示例：http://demos.telerik.com/kendo-ui/grid/custom-command

如果您想将其添加为模板，请在模板中声明onclick事件，如：

<button class="test" onclick="yourFunction()"....

或者在网格初始化之后就像

一样

$(".test").click(function(){
....
})

为什么此Kendo Grid中的编辑按钮不起作用

1 个答案: