CODEWITHSUNDEEP
angularjsangularjs-directiveangular-ui-grid
user2889674
user2889674

Reputation: 97

How to use cellTooltip with cellTemplate in angular ui grid

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//
}
        }
      ]

}

Upvotes: 3

Views: 7366

Answers (6)

john2002
john2002

Reputation: 39

Need to change like this

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

Upvotes: 1

Malik Zahid
Malik Zahid

Reputation: 755

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>',
}

Upvotes: 2

Umesh Markande
Umesh Markande

Reputation: 309

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

Upvotes: 2

kberthoty
kberthoty

Reputation: 1

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 ...;
             }
...
}
]

Upvotes: 0

Pratik Bhat
Pratik Bhat

Reputation: 7614

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!

Upvotes: 3

user2889674
user2889674

Reputation: 97

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:{}

};
});

Upvotes: 1

Related Questions