Kendo grid tooltip for unknown column

Question

I am using kendo grid and I would like to show a tooltip everytime the user perform a mouseover on any grid cell. The following example works fine, but what about if I don't know the column the user do mouseover?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"> 
</script>
</head>
<body>

<div id="grid"></div>
<style>
  #grid{
    width:300px;
  }
</style>
<script>
  var grid = null;

  $(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
      data: [
        {ID:1 ,Text: "Text 1"},
        {ID:2 ,Text: "Text 2"},
        {ID:3 ,Text: "Text 3"}
      ],
      schema: {
        model: {
          fields: {
            ID: { type: "number" },
            Text: { type: "string" }
          }}
      },
      pageSize: 20
    });

    grid = $("#grid").kendoGrid({
      dataSource: dataSource,
      scrollable: true,
      filterable: true,
      toolbar: ["create"],
      columns: [
        { field: "ID", width: "50px" },
        { field: "Text", width: "200px", attributes: {
          style: 'white-space: nowrap '
        }  }],
      editable: "incell"
    }).data("kendoGrid");

    $("#grid").kendoTooltip({
      filter: "td:nth-child(2)", //this filter selects the second column's cells
      position: "right",
      content: function(e){
        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = dataItem.Text;
        return content;
      }
    }).data("kendoTooltip");
  });
</script>

</body>
</html>

So this line is not enough in my case:

var content = dataItem.Text;

because: 1) I could have field1, field2, field3, etc. In this case, we are assuming that the only column enabled to mouseover is the column named "Text". 2) I need not only the value of any cell the user perform the mouseover, but also the column name.

So what I need to show in the tooltip is:

var content = "column name: " + columname + " - Value: " + columnValue;

Where columname is the name taken from any column mouseover and the columnValue the value of that cell.

Thanks

David Shorthose David Shorthose · Accepted Answer · 2018-06-05T12:00:00

So I am assuming you just want the column header and the value that is that specific cell you are hovering over if I am understanding your question correctly so rather than showing the entire dataItem object i.e.

{ID:1, Text:"Text Value 1"}

You just want:

 Text : Text Value 1

Assuming this is what you want then this dojo should help. http://dojo.telerik.com/uleJEbiz

Here is the code just for reference:

function(e){

        var grid = $('#grid').data('kendoGrid'); 
        var rowIndex = e.target.closest("tr").index(); 
        var colIndex = e.target.index(); 

        var dataItem = grid.dataItem(e.target.closest("tr"));

        var columns = grid.columns.filter(function(col){
          return !col.hidden; 
        }); 

         var content = 'Found on Row::' + rowIndex + ' Column::' + colIndex + 
         '<br/>' +  columns[colIndex].field + '::' +   dataItem[columns[colIndex].field];


        return content;
      }

All I have done is looked at the problem as a grid we know what row we are looking for but not necessarily the column we are after as we may have hidden columns, so we can't just look at a specific index of the dataItem to pull that item as it may be incorrect. e.g. if you have three properties but the middle one is hidden then you will end up pulling an incorrect value.

So if get the visible column headers only then we can reference the property by the field name.

I have obviously changed the content string to show you the row and column position that we have hit within the grid.

Kendo grid tooltip for unknown column

1 Answers