Cell filter for dynamic column, Angular ui grid

Question

I get data array from api call. From this data I need to display only specific value. Inside of each array is nested array event properties. To display this nested array I reformat initial data array to my custom array. There is only one limitation in new array I have to save all object properties which I took from nested array. The grid displays data and column definition works well, but there is only one problem which I cannot resolve. The data inside of grid displays as object. I have followed by ui-grid docs, and have set cell filter for each columns, but it isn't working.

So Where is my mistake? I appreciate any help.

Here is my code and plunker

    var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', '$interval', function ($scope, $http, uiGridConstants, $interval) {

  $http.get('data.json')
    .success(function(response) {

                var array = [];
                    var events = response;

                    angular.forEach(events, function (field) {

                        var custom = field.eventProperties;

                        var tempObj = {};

                        tempObj.id = field.id;
                        tempObj.eventTypeName = field.eventTypeName;
                        tempObj.description = field.description;

                        for (var i = 0; i < custom.length; i++) {
                            tempObj[custom[i].name] = custom[i];
                        }

                        array.push(tempObj);

                    });

                    $scope.gridOptions.data = array;


                      $interval(function () {

                        for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) {
                            $scope.gridOptions.columnDefs[i].enableSorting = false;
                            $scope.gridOptions.columnDefs[i].cellFilter = 'cellValue';

                        }

                        console.log($scope.gridOptions.columnDefs);

                        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                        $scope.gridApi.core.refresh();

                    }, 0, 1);
    });


        $scope.gridOptions = {
            rowHeight: 50,
            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
            }
        }


}])
.filter('cellValue', function() {
  return function(cell) {
   return cell.value
  };
});

salix salix · Accepted Answer · 2017-01-02T21:30:29

You have set the whole eventProperty object (custom[i]) for each eventProperty. Try this:

for (var i = 0; i < custom.length; i++) {
    tempObj[custom[i].name] = custom[i].value;
}

Cell filter for dynamic column, Angular ui grid

1 Answers