Kendo grid How can I display row content on mouse over for each column as my data is huge?

Question

I need to display open a pane where I can display the full text of selected column. I was referring to How can I add multiple tooltips on kendo ui grid.

but not getting how to get the tooltip for each column selected.

Thanks in advance.

Answer 1

See if this demo helps you.

The Tooltip widget has a content configuration that accepts either a string or a function returning a string.
This function gets a parameter containing the target for the tooltip which is the element your mouse is hovering over.

You can filter the elements so that only tds pop the tooltip.

Here's how I built and applied the tooltip options object I use in the example:

$("#container").kendoTooltip({
    filter: "td",
    content: function(e) {return e.target.html();}
});

This example will show a tooltip containing the same content as the cell you're poining at.

If you have any further questions, feel free to ask them.

Example from the external link as a snippet:

$(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
      },
      pageSize: 20
    },
    height: 550,
    groupable: true,
    sortable: true,
    pageable: {
      refresh: true,
      pageSizes: true,
      buttonCount: 5
    },
    columns: [{
      template: "<div class='customer-photo'" +
        "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
        "<div class='customer-name'>#: ContactName #</div>",
      field: "ContactName",
      title: "Contact Name"
    }, {
      field: "ContactTitle",
      title: "Contact Title"
    }, {
      field: "CompanyName",
      title: "Company Name"
    }, {
      field: "Country"
    }]
  });
});

$("#container").kendoTooltip({
  filter: "td",
  content: function(e) {
    return e.target.html();
  }
});

html {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.customer-photo {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: 32px 35px;
  background-position: center center;
  vertical-align: middle;
  line-height: 32px;
  box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, .2);
  margin-left: 5px;
}

.customer-name {
  display: inline-block;
  vertical-align: middle;
  line-height: 32px;
  padding-left: 3px;
}

#grid {
  width: 500px;
}

#grid td {
  white-space: nowrap;
  text-overflow: ellipsis;
}

<base href="http://demos.telerik.com/kendo-ui/grid/index">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

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