This is a migrated thread and some comments may be shown as answers.

ToolTip in Row Template of kendo-grid (wrapper)

1 Answer 69 Views
This is a migrated thread and some comments may be shown as answers.
Tonys
Top achievements
Rank 1
Tonys asked on 02 Apr 2019, 09:12 AM

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 ;-)

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 04 Apr 2019, 06:45 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Tonys
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or