Kendo Grid - find column and row index of clicked cell

Question

I have a Kendo UI data grid and with attribute data-selectable="cell". I want to

1) capture the event of any cell being clicked - whether from header row or any other row in the grid

2) find the index of the column and row of that cell

I have tried the code at -

Kendo UI Grid: Select single cell, get back DataItem, and prevent specific cells from being selected?

Row index works with this code, column does not - always returns -1. Also, this event gets fired 5 times on page load - not just cell click.

Answer 1

For single cell selection

http://dojo.telerik.com/@harsh/aToKe read the comments for change event

Code:

$("#grid").kendoGrid({
      dataSource: {
          type: "odata",
          transport: {
              read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
          },
          pageSize: 20
      },
      height: 300,
      sortable: true,
      selectable: 'cell',
      pageable: {
          refresh: true,
          pageSizes: true,
          buttonCount: 5
      },
      change: function (e) {
          var $grid = e.sender; //grid ref
          var $cell = $grid.select(); // selected td
          var $row = $cell.closest('tr'); //selected tr
          var row_uid = $row.attr('data-uid'); //uid of selected row
          var cell_index = $cell.index(); //cell index 0 based
          var row_index = $row.index(); //row index 0 based
          var row_data = $grid.dataItem($row).toJSON(); //selected row data

          console.log(row_data);
      },
      columns: [{
          field: "ContactName",
          title: "Contact Name",
          width: 200
      }, {
          field: "ContactTitle",
          title: "Contact Title"
      }, {
          field: "CompanyName",
          title: "Company Name"
      }, {
          field: "Country",
          width: 150
      }]
  });