Tool Tip on MVVM Grid Row

[Perry]

Is is possible to add a tooltip to the entire row of a grid?  I currently can add a tooltip to each column template but was wondering if I could just have the tooltip appear on any item in the entire row?   

This is solution I am looking for but in a MVVM implementation
https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/grid-with-kendo-ui-tooltip

 

 

<div id="grdWarningndex" data-role="grid"
  data-editable="false"        
  data-sortable="false"       
  data-columns="[
                    { 'field': 'WarningStatus', 'width': 5,'title': 'WarningStatus' ,template: '<span data-role=\'tooltip\' title=\'The warning status tooltip is: #=WarningStatus# \'> #=WarningStatus#</span>' },
                    { 'field': 'WarningMessage', 'width': 100,'title': 'WarningMessage','template': '<span data-role=\'tooltip\' title=\'This is the message tooltip \'> <a href=/=#=WarningMessage# data-bind=\'click: goToView2\' >#=WarningMessage# </a> </span>'  },
                    { 'field': 'WarningAction', 'width': 100,'title': 'WarningAction','template': '<a href=/=#=WarningAction#  data-bind=\'click: goToView3\' >#=WarningAction#  </a>'  },                   
                    { 'field': 'WarningTime', 'width': 150,'title': 'WarningTime(EST)' },     
                                                   ]"                                
                                                
                                                
                                                 data-bind="source: dsWarnings, events: { dataBound: dsWarnings }"  
                                                 style="height: 300px"
                                                 > 
                                                

[Tsvetina]

Hello Perry,

If you want to use the same type of approach for the row tooltip, you can declare a row template for the Grid and declare the tooltip in the template:

<div data-role="grid"
     data-row-template="row-template"

<script id="row-template" type="text/x-kendo-template">
          <tr data-role="tooltip" title="Product #:ProductName# costs $#:UnitPrice#">
          <td>#:ProductName#</td>
          <td>#:UnitPrice#</td>
  </tr>
</script>

You can see a small example in this Dojo:
https://dojo.telerik.com/ojIpoPOt

Regards,
Tsvetina
Progress Telerik

[Perry]

That looks good....but since I'm using this MVVM application how can I reference this  row template script as my grid is already in kendo template?   (Script Tag wtihin a Script)

<script id="index" type="text/x-kendo-template">

  <div>
          <h4>Add or update a record</h4>
          <div data-role="grid"
               data-row-template="row-template"
               data-columns="[
                             { 'field': 'ProductName', 'width': 270 },
                             { 'field': 'UnitPrice' },
                             ]"
               data-bind="source: products"
               style="height: 200px"></div>
          <script id="row-template" type="text/x-kendo-template">
    <tr data-role="tooltip" title="Product #:ProductName# costs $#:UnitPrice#">
        <td>#:ProductName#</td>
        <td>#:UnitPrice#</td>
            </tr>
          </script>

        </div>

  </script>

[Tsvetina]

Hello Perry,

It should be enough to move the template used by the Grid outside of the other template. You cannot have nested <script> tags, because this is invalid HTML.

<script id="index" type="text/x-kendo-template">
    <div>
        <h4>Add or update a record</h4>
          <div data-role="grid"
               data-row-template="row-template"
               data-columns="[
                             { 'field': 'ProductName', 'width': 270 },
                             { 'field': 'UnitPrice' },
                             ]"
               data-bind="source: products"
               style="height: 200px"></div>
        </div>
  </script>
  <script id="row-template" type="text/x-kendo-template">
    <tr data-role="tooltip" title="Product #:ProductName# costs $#:UnitPrice#">
        <td>#:ProductName#</td>
        <td>#:UnitPrice#</td>
    </tr>
  </script>

If it still doesn't work, please explain where and how is the template containing the Grid used.

Regards,
Tsvetina
Progress Telerik

[Perry]

Thanks, got it working.