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

Tool Tip on MVVM Grid Row

4 Answers 115 Views
SPA
This is a migrated thread and some comments may be shown as answers.
Perry
Top achievements
Rank 1
Perry asked on 11 Feb 2019, 11:50 PM

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"
                                                 > 
                                                

4 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 13 Feb 2019, 04:11 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Perry
Top achievements
Rank 1
answered on 13 Feb 2019, 09:41 PM

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>
0
Accepted
Tsvetina
Telerik team
answered on 14 Feb 2019, 12:03 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Perry
Top achievements
Rank 1
answered on 14 Feb 2019, 05:27 PM
Thanks, got it working.
Tags
SPA
Asked by
Perry
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Perry
Top achievements
Rank 1
Share this question
or