Applying a cell filter in Ui GRID

Question

I have to create the following grid. But I want to apply a cellFiler or rowFilter. How can I do it?

$scope.columns = [{ field: 'Trade Version #110010' }];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    onRegisterApi: function( gridApi ) { 
      $scope.gridApi = gridApi;
     var cellTemplate = 'ui-grid/selectionRowHeader';   // you could use your own template here
      $scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-top-panel ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['property']}}</div></div>"} );
    }
  };

   $scope.gridOptions.data = [
    {
        "property": "Modified Date",
        "cellFilter": "convertLocalDate | date: 'MMM dd, yyyy'",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    }...
]

attaching the plucker Here

Thanks in advance Kiran gopal

Answer 1

Not sure what you're trying to do with it but the following will concatenate "Test Filter" to the end of each row.

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

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.columns = [{ field: 'Trade Version #110010',
                      cellFilter: 'testFilter'}];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    onRegisterApi: function( gridApi ) { 
      $scope.gridApi = gridApi;
     var cellTemplate = 'ui-grid/selectionRowHeader';   // you could use your own template here
      $scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-top-panel ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['property']}}</div></div>"} );
    }
  };

   $scope.gridOptions.data = [
    {
        "property": "Modified Date",
        "cellFilter": "convertLocalDate | date: 'MMM dd, yyyy'",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Modifier",
        "Trade Version #110010": "Some Trade Modifier"
    },
    {
        "property": "Type",
        "Trade Version #110010": "Some Product"
    },
    {
        "property": "RIC Code",
        "Trade Version #110010": 1313,
         "cellFilter": "RICFilter | format: 'tt/yy",
    },
    {
        "property": "What Changed",
        "Trade Version #110010": "Some info"
    },
    {
        "property": "Settlement Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Price",
        "Trade Version #110010": "345"
    },
    {
        "property": "Trade Reference #",
        "Trade Version #110010": 110010
    }
]
}]).filter('testFilter', function() {
  return function(value) {
    return value + " Test Filter";
  }
});