How can I avoid showing html code in a UI-grid cell with Angularjs

Question

The field that I am passing to the ui-grid is an html fragment. like this:

<span style="color:BLACK; cursor: pointer; text-decoration: underline;" onclick="openForm(154,68962)">PENDING</span>

And the ui-grid is showing the html code inside the cell. I want to show not the html but the span with the on-click event working. I tried assigning this to the ui-grid field {{ COL_FIELD }} like this but it did not work:

{ displayName: 'Form Status', field: 'FormStatus', headerCellClass: 'center', width: '80', enableColumnMenu: false, cellClass: 'text-center', cellTooltip: true, cellTemplate: {{COL_FIELD}} },

SakthiSureshAnand · Accepted Answer · 2015-10-19 10:08:35Z

3

You Could try cellTemplate in UI Grid eg code,

var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' + '<a href="{{row.getProperty(col.field)}}">Visible text</a>' + '</div>';

Defined the var linkCellTemplate inside your Controller and point out in $scope.gridoptions like

$scope.gridOptions = {
columnDefs: [{
                'field':'link',
                'cellTemplate':linkCellTemplate
            }]
};

answered Oct 19, 2015 at 10:08

SakthiSureshAnand

1,3621 gold badge20 silver badges36 bronze badges

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

Comments

Meir · Accepted Answer · 2015-10-16 23:05:47Z

2

The field contains text, and even if this text is a valid html code, it will remain text. What you are trying to get is to convert text to html element 'on the fly'. Angular has a support for this using ngBindHtml. It does sanitation of the html and might drop some parts of it. If this is a problem, have a look at this great article for an explanation of how to bypass it.

I assume that this will change your config a bit:

.... cellTemplate: <div ng-bind-html="{{COL_FIELD}}"></div>

If you got all this to display property, you might find that your handler (is it defined on the scope?) is not triggered/found. If this is the case, you might have to use ui-grid's appScope.

answered Oct 16, 2015 at 23:05

Meir

14.4k4 gold badges44 silver badges49 bronze badges

Collectives™ on Stack Overflow

How can I avoid showing html code in a UI-grid cell with Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related