Button in kendo ui grid does not work on mobile device

Question

I have an example, added kendo ui grid with Backbone.js. In the kendo ui grid, I have buttons for deleting rows, but the buttons do not work on mobile devices. If I press the button again, it sometimes works. What for? I declare a button in kendoGrid.columns like this:

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

To delete a line and do something when the 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")); } }); 

Full example

Edit:

I am using kendo ui version: 2012.3.1114

Answer 1

Mobile and click event are not best friends!

In this code that you are adding, click on the Html element that has the .ob-delete class that Kendo will not fire in the click event. Instead, try to implement your removal method as a user 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> 

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