Using a function in cell template

Question

I am using angularjs with ui-grid. One column of the grid contains a timestamp that I would like to render as a properly formatted date.

Up to now, I tried like this but the function is never called.

  $scope.formatDate = function(date) {
    return '42';
  };

  $scope.columns = [
    {field: 'date', cellTemplate: '<div class="ui-grid-cell-contents">formatDate({{row.entity.date}})</div>'},
    {field: 'title'},
    {field: 'quantity'},
    //[...]
  ];

Instead, the function call is considered as a string literal. As a result, the column always displays formatDate(*timestamp*).

I only found a non-satisfying way of achieving it by defining a function on each single row when receiving them :

  $scope.columns = [
    {field: 'getFormattedDate()'},
    //[...]
  ];

  $http.post('/api/data/').success(function (data) {
    $scope.gridOptions.data = data.elements;

    $scope.gridOptions.data.forEach(function(row) {
      row.getFormattedDate = function() {
        return '42';
      }
    })
  });

Any better suggestion?

Solution 1

If you want to access controller scope level functions using ui-grid you can use grid.appScope, here is a quick example:

{
    name: 'date',
    cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
}

Full Example:

angular.module('myApp', ['ui.grid'])
    .controller('myCtrl', ['$scope', function ($scope) {

    $scope.parseDate = function (p) {
        // Just return the value you want to output
        return p;
    }

    $scope.parseName = function (p) {
        // Just return the value you want to output
        return p;
    }

    $scope.gridOptions = {
        data: [{
            name: "Foo",
            date: "2015-10-12"
        }, {
            name: "Bar",
            date: "2014-10-12"
        }],
        columnDefs: [{
            name: 'name',
            cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseName(row.entity.name)}}</div>'
        }, {
            name: 'date',
            cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
        }]
    };
}]);

Fiddle Example

Solution 2

To use function output the whole function call, not the arguments , needs to be wrapped in expression braces

<div class="ui-grid-cell-contents">{{ formatDate(row.entity.date) }}</div>

Comments

[Arnaud Denoyelle]

The cells are rendered empty. A console.log() in $scope.formatDate shows that the function is not called. But I cannot see any errors in the console.

[charlietfl]

create a directive , scope inside grid won't be your controller scope

[Rob Sedgwick]

You need {{ grid.appScope.formatDate(row.entity.date) }}

[aswininayak]

This is working fine but when I am trying to return a an element its not working. How can we return an inline HTML? Here I am trying to Show custom button on Group header lavel by using cellTemplate.

[jnthnjns]

@aswininayak If you want to use html in AngularJS you need to use ngBindHtml and ngSanitize but, my understanding is that ngSanitize does not allow HTML form elements, it strips them. In this example you can see how the input elements are removed and the div is allowed

[Phil3992]

Fiddle dead link

[jnthnjns]

@Phil3992 Assuming you mean the link in the answer, it is fixed. Thanks.