Tooltip in Angular Kendo UI Grid headers and cells

8 posts, 1 answers
  1. Rahul
    Rahul avatar
    10 posts
    Member since:
    Mar 2016

    Posted 16 Mar 2016 Link to this post

    I am using Kendo UI Grid with AngularJS. Some of my columns are narrow and the column headers don't display fully (they end in ... next to the filter icon). I want to display tooltip when I hover over them. I also want to display tooltip for every cell in the grid when I hover over them. I looked at some examples from this forum but they were showing tooltip only for a specific column. How can I display tooltips for all headers and cells?

     

    Development details:

    Kendo UI version: 2016.1.226

    OS: Windows 8.1

    Browser: Chrome 49, Firefox 45, IE 11

     

    Editing the standard AngularJS grid sample will be helpful to us. If this has already been answered, kindly redirect me to the answers.

    Thank you for your time.

  2. Rahul
    Rahul avatar
    10 posts
    Member since:
    Mar 2016

    Posted 18 Mar 2016 Link to this post

    Does anyone know how to do this?

     

    Thanks.

  3. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1268 posts

    Posted 21 Mar 2016 Link to this post

    Hello Rahul,

    You can achieve the desired behavior by applying the Kendo UI Tooltip initialization function to the element, containing the Grid. Then use the filter and content options of the Tooltip to customize which cells will show a tooltip on hover, and the corresponding content. Check out the following dojo for a sample implementation:

    http://dojo.telerik.com/ocUtU/2

    Please note that depending on other Grid settings (e.g. filterable, sortable), additional custom logic for getting the text of the <th> only (excluding its child elements' text) might be needed. You can find a possible solution in the following article:

    http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Rahul
    Rahul avatar
    10 posts
    Member since:
    Mar 2016

    Posted 21 Mar 2016 Link to this post

    Hi Dimiter,

     

    That looks good. However we are looking for the tooptip in AngularJS version of the grid.

    Below is a dojo link of the AngularJS Grid sample. If you can show us how to do it here, we will really appreciate it.

    http://dojo.telerik.com/ajegO

     

    Thanks,

    Rahul

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1268 posts

    Posted 23 Mar 2016 Link to this post

    Hello Rahul,

    You need to wrap the Grid in a <kendo-tooltip options="tooltipOptions"> and attach the corresponding options to the scope. Please check this dojo for a sample implementation:

    http://dojo.telerik.com/ajegO/3

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Rahul
    Rahul avatar
    10 posts
    Member since:
    Mar 2016

    Posted 25 Mar 2016 Link to this post

    Hi Dimiter,

     

    Thanks for the sample. I really appreciate you showing me how to do it in AngularJS. I was able to integrate into our code.

    However, I found 2 issues:

    1. We have column menu turned on and when hovering over the column headers, the tooltip displays text like "Column SettingsFirstName", "ColumnSettingsLastName" etc. How can we fix this?
    2. For grid cells which are empty, the tooltip is shown with no content. I'm doing a hack to hide the tooltip in Tooltip's show event if the text is empty. But tooltip is shown momentarily and then goes away. How can we avoid showing tooltip for empty cells?

    I have updated the dojo sample to exhibit the above behavior.

    http://dojo.telerik.com/ajegO/4

     

    Thanks,

    Rahul

  7. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1268 posts

    Posted 30 Mar 2016 Link to this post

    Hello Rahul,

    You can achieve the desired behavior by applying the following adjustments:

    1) The cell's text is wrapped in a child <span> element; filter out the empty spans to prevent the Tooltip from showing when hovering empty cells.

    2) Check whether the hovered cell is a <th>, and, if so, return the content of its child that is actually containing the text that you want to show in the Tooltip (in the discussed case - an <a> element with class 'k-link').

    For example:

    $scope.tooltipOptions = {
      filter: "td > span:not(:empty), th", //this filter selects all th and the non-empty spans inside of a td
      position: "right",
      // apply additional custom logic to display the text of the relevant element only
      content: function(e){
        var cell = $(e.target);
        if(cell.is('th')){
          return cell.children('a.k-link').text();
        }
     
        var content = cell.text();
        return content;
      },
      width: Infinity
    };

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Rahul
    Rahul avatar
    10 posts
    Member since:
    Mar 2016

    Posted 30 Mar 2016 Link to this post

    Hi Dimiter,

     

    It works perfectly! Thanks a lot.

    Here is the updated dojo sample if anyone wants to try it.

    http://dojo.telerik.com/ajegO/7

     

    Thanks,

    Rahul

Back to Top