ToolTip in Row Template of kendo-grid (wrapper)

[Tonys]

Hi,

I'm looking for the best way to display a tooltip when hovering over the value of a cell (very useful for custom commands).

I have already defined a template for the line and it works:

<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class="k-master-row"  data-uid="#: uid #" role="row">
<td role="gridcell">   #: OrderID # </td>
<td role="gridcell">   #: ShipName #</td>
<td role="gridcell">   #: Freight #</td>
<td role="gridcell">   #: OrderDate #</td><br>
</tr>
</script>

 

What is the best way to show a TootlTip for example hover  "OrderID " value ?
Thanks in advance ;-)

[Veselin Tsvetanov]

Hello Tonys,

Here you will find a small sample implementing a Tooltip for a Grid column. You will notice that in order to display the Tooltip only on the cells of the ProductName column, I have used the :filter prop of the component. To get further information about the hovered Grid item, I have used the :content call:

<kendo-tooltip :content="getContent"
  :filter="'table>tbody>tr>td:nth-of-type(2)'">
...

and:

getContent (e) {
  var grid = this.$refs.grid.kendoWidget();
  var dataItem = grid.dataItem(e.target.closest("tr"));
  var price = dataItem.UnitPrice;

  return "Unit price: " + price;
}

Regards,
Veselin Tsvetanov
Progress Telerik