Grid Does Not Recognize Mouse Clicks on Touch-Screen Devices

Environment

Product Version 2017.3 1026
Product Grid for Progress® Kendo UI®

Description

When I use the Grid in Chrome or Firefox while on a hybrid device (touch screen), the Grid fails to recognize mouse clicks—the current cell cannot be found and it is either undefined, or if coming from somewhere else in the Grid, the current cell is still the previous cell.

Cause

The incorrect focus on mobile devices is a known issue.

Suggested Workarounds

  1. Add a touchstart and click event handlers to the tbody element of the Grid.
  2. Get the current cell with jQuery.
if(kendo.support.touch){
 var grid = $("#grid").data("kendoGrid");
 grid.tbody.on("touchstart click", function(e){
    var currentCell = $(e.target);
  });  
}

The following example demonstrates how to fully implement the suggested workaround.

Example
<div id="example">
      <div id="grid"></div>

      <script>
        $(document).ready(function () {
          var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
              dataSource = new kendo.data.DataSource({
                transport: {
                  read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                  },
                  update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                  },
                  destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                  },
                  create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                  },
                  parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                      return {models: kendo.stringify(options.models)};
                    }
                  }
                },
                batch: true,
                pageSize: 20,
                schema: {
                  model: {
                    id: "ProductID",
                    fields: {
                      ProductID: { editable: false, nullable: true },
                      ProductName: { validation: { required: true } },
                      UnitPrice: { type: "number", validation: { required: true, min: 1} },
                      Discontinued: { type: "boolean" },
                      UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                  }
                }
              });

          var grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: [
              "ProductName",
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
              { field: "UnitsInStock", title: "Units In Stock", width: 120 },
              { field: "Discontinued", width: 120, editor: customBoolEditor },
              { command: "destroy", title: "&nbsp;", width: 150 }],
            editable: true,

          }).data("kendoGrid").tbody.on("touchstart click", function(e){
            $("body").append("<div>" + $(e.target).html() + "</div>");
            });
        })

        function customBoolEditor(container, options) {
          $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
          $('<label class="k-checkbox-label">​</label>').appendTo(container);
        }
      </script>
    </div>
In this article
Not finding the help you need? Improve this article