Showing tooltip for the frozen row in Kendo Grid

Question

I have a kendo grid with a one frozen row on the top. I wanted to show a tool tip when user hover mouse over the grid row. I was able to show tooltip for all the rows except for the top frozen row. The top frozen row still shows data from the second row.

$(document).ready(function () {

    $("#grid").kendoGrid({
        autoBind: false,
        height: 300,
        columns: [{ field: "Source", title: "Source" },
        { field: "FirstName", title: "First Name" },
        { field: "LastName", title: "Last Name" }],
        dataSource: {
            data: [
                { Source: "Master", FirstName: "Foo", LastName: "Bar" },
                { Source: "2", FirstName: "FirstName 2", LastName: "Last Name 2" },
                { Source: "3", FirstName: "FirstName 3", LastName: "Last Name 3" },
                { Source: "4", FirstName: "FirstName 4", LastName: "Last Name 4" },
                { Source: "5", FirstName: "FirstName 5", LastName: "Last Name 5" },
                { Source: "6", FirstName: "FirstName 6", LastName: "Last Name 6" },
                { Source: "7", FirstName: "FirstName 7", LastName: "Last Name 7" },
                { Source: "8", FirstName: "FirstName 8", LastName: "Last Name 8" },
                { Source: "9", FirstName: "FirstName 9", LastName: "Last Name 9" },
                { Source: "10", FirstName: "FirstName 10", LastName: "Last Name 10" },
                { Source: "11", FirstName: "FirstName 11", LastName: "Last Name 11" },
                { Source: "12", FirstName: "FirstName 12", LastName: "Last Name 12" }
            ]
        }
    });

    var kGrid = $("#grid").data("kendoGrid");

    kGrid.bind("dataBound", function (e) {
        console.log("dataBound");
        var frozenRow;
        var items = e.sender.items();
        items.each(function () {
            var row = $(this);
            var dataItem = e.sender.dataItem(row);
            if (dataItem.Source == "Master") {
                frozenRow = row;
            }
        })

        if (frozenRow) {
            var cloned = frozenRow.clone();
            cloned.addClass("im-frozen-row");
            var thead = kGrid.element.find(".k-grid-header table thead");
            thead.append(cloned);
            frozenRow.hide();
        }
    });

    kGrid.dataSource.fetch();

    $("#grid").kendoTooltip({
        filter: ".k-master-row", //this filter selects the second column's cells and the second column header
        position: "top",
        width: 250,
        content: function (e) {
            // If the element is the header, return the text of the cell.
            if (e.target.is("th")) {
                return e.target.text();
            }

            var dataItem = $("#grid").data("kendoGrid").dataItem(e.target);
            return "Source: " + dataItem.Source + "<br/>" + dataItem.FirstName + "," + dataItem.LastName;
        }
    }).data("kendoTooltip");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script></head>

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

Answer 1

Try this, I am using your custom class that you are adding to the row that you clone into header section "im-frozen-row" to identify your frozen row when you are adding tooltips. Your if condition is not able to identify your row since it is not a "th" type element. And since you are already having a class that you add in your clone, it is easier to find the element you're looking for.

$("#grid").kendoTooltip({
    filter: ".k-master-row", //this filter selects the second column's cells and the second column header
    position: "top",
    width: 250,
    content: function (e) {
        if(e.target.hasClass("im-frozen-row")) { //Note this will allow to identify your frozen row
          let arr = e.target.text().match(/[A-Z][a-z]+/g); // Here your returned response is for your data here "MasterFooBar", because this is hardcoded data I can break the words into 3 words, but if you'd like to have exact same tooltips as other rows with some other type of data it will not work.
          let str = `Source: ${arr[0]}, First Name: ${arr[1]}, Last Name: ${arr[2]}`; // I am concatenating string to show exactly the type of tooltip other rows have.
          return str;
        }
        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target);
        return "Source: " + dataItem.Source + "<br/>" + dataItem.FirstName + "," + dataItem.LastName;
    }
}).data("kendoTooltip");

Please note that you can also print your tooltip as is what is returned from "e.target.text()".