How to use cellTooltip with cellTemplate in angular ui grid

Question

i am using angular ui grid, there is one column which is getting html string as input, so to display the column value i am using ng-bind-html in cellTemplate(which works fine to display plain inner text), but cellTooltip doesn't work for tooltip(it doesn't), if i use title="{{row.entity.htmlfield}}" in cellTemplate then it shows html string but i need the plain text, how can i achieve this?

what i am using :

$scope.datagrid={
 colDefs=[
        {
           field:'htmlfield',
           cellTemplate:'<div title="{{row.entity.htmlfield}}" ng-bind-html="{{row.entity.htmlfield}}"></div>',//html field is expecting html content
           cellTooltip:function(row,col){
           return row.entity.htmlfield //it doesn't work with cellTemplate//
}
        }
      ]

}

field:'htmlfield', cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>', — Malik Zahid
– Malik Zahid, Commented Jul 9, 2019 at 7:25

Pratik Bhat · Accepted Answer · 2016-05-06 04:26:04Z

3

Solution 1: Remove cellTooltip when you use cellTemplate
You can use a filter like

app.filter('trusted', function ($sce) {
  return function (value) {
    return $sce.trustAsHtml(value);
  }
});

And inside cellTemplate use -

title="{{row.entity.htmlfield | trusted}}"

Solution 2:

You can create a filter on above lines and use it in cellFilter
Tooltips respect the cellFilter, so if you define a cellFilter it will also be used in the tooltip.

Hope this helps!

answered May 6, 2016 at 4:26

Pratik Bhat

7,7542 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2889674 Over a year ago

Thanks mate ! this solution surely does work, with my solution the built-in filtering of ui-grid was not working correctly but with filter it does, but somehow $sce.trustAsHtml doesnt work for me i had tried this earlier also, in filter i had to use regular expression to convert the html to plain text and then return it.

Pratik Bhat Over a year ago

@user2889674 - good to know that you found a working solution. please post it as an answer and accept it so that it is useful for other users.

Umesh Markande · Accepted Answer · 2018-09-17 05:58:28Z

2

We can use cellTemplate and cellTooltip like below, for example,

$scope.gridOptions = {
    columnDefs: [
      { name: 'name', cellTemplate:"<div class='ui-grid-cell-contents'  title='{{grid.appScope.customTooltip(row,col,COL_FIELD)}}'>{{COL_FIELD CUSTOM_FILTERS}}</div>"
      }
]

$scope.customTooltip = function (row,col,value) {
    console.log(row);
    console.log(col);
    return value;
  }

I have created function for cellTooltip and passed it into title tag, and its working fine. https://plnkr.co/edit/Dcpwy5opZ9BwC8YdWf3H?p=preview

answered Sep 17, 2018 at 5:58

Umesh Markande

3091 silver badge6 bronze badges

Comments

Malik Zahid · Accepted Answer · 2019-07-09 07:24:40Z

2

So simple just remove cellTooltip and add title tag in the cellTemplate div.

{
   field:'htmlfield',
   cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>',
}

answered Jul 9, 2019 at 7:24

Malik Zahid

7756 silver badges16 bronze badges

Comments

user2889674 · Accepted Answer · 2016-05-05 08:51:53Z

I achieved the goal using a custom directive the code for the directive is like

$scope.datagrid={
  colDefs=[
            {
               field:'htmlfield',
               cellTemplate:'<tool-tip text="{{row.entity.htmlfield}}"></tool-tip>',//html field is expecting html content, no need to use cellTooltip as it doesn't work//
            }
          ]
}
//create a custom directive to give required feel to your field template//
angular.module('app').directive('tooTip',function(){
          var linkFunction=function(scope,element,attributes){
                  scope.text=String(attributes['text']).replace('/<[^>]+>/gm', ''); 
          };
return{
    restrict:'E',
    template:'<div title="{{text}}">{{text}}</div>',
    link:linkFunction,
    scope:{}

};
});

john2002 · Accepted Answer · 2022-02-15 13:02:31Z

1

Need to change like this

cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>'

answered Feb 15, 2022 at 13:02

john2002

392 bronze badges

Comments

kberthoty · Accepted Answer · 2017-05-30 14:19:38Z

0

Original cellTemplate from ui-grid source:

"<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"

In this template TOOLTIP and COL_FIELD and CUSTOM_FILTERS are ui-grid macro-s.

I define cellTemplate (only icon), and use cellTooltip (with fields error messages), and to work freely:

columnDefs: [
{
...
cellTemplate: '<span class="glyphicon glyphicon-alert" title="TOOLTIP"></span>',
cellTooltip: function( row, col ) {
                        return ...;
             }
...
}
]

answered May 30, 2017 at 14:19

kberthoty

1

1 Comment

gdgr Over a year ago

It's not really clear what you are asking here. If you could add more details and a specific question it would help you garner useful answers.

Collectives™ on Stack Overflow

How to use cellTooltip with cellTemplate in angular ui grid

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Original cellTemplate from ui-grid source:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Original cellTemplate from ui-grid source:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related