In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?

Question

When configuring an Angular ui-grid, you specify the field for each column definition. You can either use a string to point to the right field in the row.entity, or you can use a function. See this github issue for a quick summary of how: https://github.com/angular-ui/ui-grid/issues/723

When specifying the field using a function, I can pass in strings, objects, and arrays as arguments. For some reason, though, it doesn't work when I pass another function. In fact, the primary function to define the field doesn't even seem to execute at all.

Here is a plunkr that shows two tables. The top one lists names and ages, then combines the two in the third column using a function. It works fine as long as you pass in a string (in this case the word " years" after the age). The bottom table shows the case where it's passing in a secondary function that returns " years". field: getNameAndAgeFunction(function(){return " years";})

In the second case, getNameAndAgeFunction() never seems to execute and the cell is left empty. Any idea of how I can pass a function in? Even better would be to pass that function in from the controller's scope. Many thanks!

Here is the JS:

var app = angular.module('myApp', ['ui.grid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [
             {name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                         {name: "Jacob", age: 27},
                         {name: "Nephi", age: 29},
                         {name: "Enos", age: 34 }];

        angular.forEach($scope.myData,function(row){
          row.getNameAndAgeString = function(units){
            return this.name + '-' + this.age + units;
          }
        });
        angular.forEach($scope.myData,function(row){
          row.getNameAndAgeFunction = function(fx){
            return this.name + '-' + this.age + fx();
          }
        });

    $scope.getUnits = function(){return " years"};

    $scope.gridOptionsString = { 
        data: 'myData',
        columnDefs: [{field: 'name', displayName: 'Name'},
                     {field:'age', displayName:'Age'},
                     {field: 'getNameAndAgeString(" years")', displayName: 'Name and age'},
                     ]
        };

    $scope.gridOptionsFunction = { 
        data: 'myData',
        columnDefs: [{field: 'name', displayName: 'Name'},
                     {field:'age', displayName:'Age'},
                     {field: 'getNameAndAgeFunction(function(){return " years";})', displayName: 'Name and age'},
                     ]
        };
});

Answer 1

This is due to the gridUtil.preEval function wich prepares the string you put in your field attribute.

It tranlsates:

• foo.bar to foo['bar']
• foo.bar(arg) to foo'bar'
• foo.bar(function() {...}) to foo['bar(function() {}']

The last one is your case, but the resulting string seems not evaluable to me (using angular $parse method).

I was looking throug it and it looks like a string like the last one:

foo.bar(function() {...})

is just not compatible with $parse method.

I'd suggest you to go with a custom cell template, you still would not be able to use nested function inside an angular expression (the ones with the curly brackets {{ ... }}) but you would have access to more variables like:

• grid.appScope: the scope wherein the grid resides.
• row: the row of the cell with custom template, row.entity gives access to entity values.
• col: the column of the cell with custom template, col.colDef gives access to column definition

You can see more here and I edited your plunker to use this, here.

Answer 2

So, I was looking at the plunkr in the post linked from the OP and a couple script links were broken, so here's a direct link with those fixed: http://plnkr.co/edit/jAyqrKZ6gGa4Xrp7NRsq?p=preview

I'll say I like that it works, using the function string in the field property. I don't like however that I have to add that function to each row of data, especially if there are 1000's of rows.

    angular.forEach($scope.myData,function(row){
      row.getNameAndAge = function(){
        return this.name + '-' + this.age;
      }
    });

I haven't found how to do this with an anonymous function, but that would look cleaner to me.