Tool Tip on MVVM Grid Row

5 posts, 1 answers
  1. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 11 Feb 2019 Link to this post

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

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 13 Feb 2019 Link to this post

    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.
  3. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 13 Feb 2019 in reply to Tsvetina Link to this post

    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>
  4. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 14 Feb 2019 Link to this post

    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.
  5. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 14 Feb 2019 in reply to Tsvetina Link to this post

    Thanks, got it working.
Back to Top