kendo ui网格中的按钮在移动设备上不起作用 [英] A button in a kendo ui grid doesn't work on mobile device

问题描述

我有一个示例，在Backbone.js中添加了一个kendo ui网格.在kendo ui网格中，我有一个用于删除行的按钮，但是这些按钮在移动设备上不起作用.如果我反复按一个按钮，它有时会起作用.为什么? 我在kendoGrid.columns中声明按钮，这样:

I have an example, a kendo ui grid is added with Backbone.js. In the kendo ui grid I have a buttons to remove rows, but the buttons don't work on mobile devices. If I press a button repeteadly, it sometimes works. Why? I declare the button in kendoGrid.columns so:

{
command: [{
     name: "destroy",
     text: "Remove",
     className: "ob-delete"
}

要删除行并在单击按钮时执行某些操作:

To remove a row and do something when button is clicked:

$(document).on("click", ".grid tbody tr .ob-delete", function (e) {
    var item = grid.dataItem($(this).closest("tr"));
    var check = confirm("Delete");
    if (check) {
        grid.removeRow($(this).closest("tr"));
    }
}); 

完整示例

我使用的是kendo ui版本:2012.3.1114

I use the kendo ui version: 2012.3.1114

推荐答案

移动和点击事件并不是最好的朋友！

Mobile and click event are not best of friends!

在此代码中，您将添加具有.ob-delete类的Html元素的单击，该元素不会触发Kendo的内置click事件.而是尝试将您的delete方法实现为此演示中显示的自定义命令: http://demos.kendoui.c​​om/web/grid/custom-command.html

In this code you are adding click on the Html element having .ob-delete class which will not fire Kendo's built in click event. Instead, try to implement your delete method as custom command shown in this demo: http://demos.kendoui.com/web/grid/custom-command.html

     $(document).ready(function () {
                var grid = $("#grid").kendoGrid({
                    dataSource: {
                       pageSize: 10,
                       data: createRandomData(50)
                    },
                    pageable: true,
                    height: 260,
                    columns: [
                        { field: "FirstName", title: "First Name" },
                        { field: "LastName", title: "Last Name" },
                        { field: "Title" },
                        { command: { text: "View Details", click: showDetails }, title: " ", width: "140px" }]
                }).data("kendoGrid");

                wnd = $("#details")
                    .kendoWindow({
                        title: "Customer Details",
                        modal: true,
                        visible: false,
                        resizable: false,
                        width: 300
                    }).data("kendoWindow");

                detailsTemplate = kendo.template($("#template").html());
            });

            function showDetails(e) {
                e.preventDefault();

                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                wnd.content(detailsTemplate(dataItem));
                wnd.center().open();
            }
        </script>

；或者，如果不需要自定义命令，请尝试如本演示中所示的默认删除事件. http://demos.kendoui.c​​om/web/grid/editing-inline.html

or if a custom command is not required, try the default delete event as shown in this demo. http://demos.kendoui.com/web/grid/editing-inline.html

这篇关于kendo ui网格中的按钮在移动设备上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！