Kendo Grid - Get cell index on hover

Question

I am trying to add a kendoToolTip to the cells of a specific column on my grid. Right now, the tooltip works, but it displays when hovering over any cell on the grid.

I want to get the specific cell index of the item im hovering over, so that I can only display the tooltip when hovering over cell index 9 for example.

The code i have always returns me cell index of -1. I can make it work with an onclick event, but i cannot get it to work with on hover.

Any help would be appreciated.

    $("#samplerequest-grid").kendoTooltip({
        filter: "td",
        content: function(e) {
            var grid = $("#samplerequest-grid").data("kendoGrid");
            var dataItem = grid.dataItem(e.target.closest('tr'));
            var rowIdx = $("tr", grid.tbody).index(dataItem);
            var colIdx = $("td", dataItem).index(this); // Always returns -1

            console.log("row:" + rowIdx + " col:" + colIdx + " msg: " + dataItem.sampleStatusMsg);
            return dataItem.sampleStatusMsg;
        }
    });

UPDATE:

Thank you for the answers. They both would have worked, and i may change my solution to use them. Before seeing your answers i did find my own solution, which was to add a template to the cell and filter for that id.

Grid Column Declaration:

{
   field: "sampleStatus",
   title: "Sample Status",
   width: "110px",
   locked: true,
   lockable: true,
   template: "<span id='sampStatus'>#=getValue(sampleStatus)#</span>"
},

Controller function for tooltip

$("#samplerequest-grid").kendoTooltip({
   filter: "#sampStatus",
   content: function(e) {
      var grid = $("#samplerequest-grid").data("kendoGrid");
      var dataItem = grid.dataItem(e.target.closest('tr'));
      return dataItem.sampleStatusMsg;
   }
});

Answer 1

I think you're overcomplicating things here. You can get the indexes with:

• e.target.index() the cell index;
• e.target.closest('tr') the row index.

You content event should be:

content: function(e) {
    var grid = $("#samplerequest-grid").data("kendoGrid");
    var tr = e.target.closest('tr');
    var dataItem = grid.dataItem(tr);
    var rowIdx = tr.index();
    var colIdx = e.target.index();

    console.log("row:" + rowIdx + " col:" + colIdx + " msg: " + dataItem.sampleStatusMsg);
    return dataItem.sampleStatusMsg;
}

Demo

Answer 2

The code to find the index will not work because you are searching for td elements in the context of the dataItem. Also, I don't think that the context of the content function is the current cell. This code should work to find the index:

var row = e.target.closest('tr');                  
var colIdx = $("td", row).index(e.target); 

but IMHO a better approach is to add a class to the column cells and the same class to the filter: https://dojo.telerik.com/@SiliconSoul/UbImUjOl