Ag-grid Custom Filter: filterParams - cellRenderer in Angular 1.x

In AngularJS (Angular 1.x) with ag-Grid, you can create a custom filter using the filterParams property and a custom cellRenderer function. This approach allows you to define a custom UI for the filter and control how the filtering logic works.

Here's an example of how to implement a custom filter using filterParams and cellRenderer:

1. Define your custom filter component:

javascriptCopy code
// CustomFilterComponent.js
angular.module('app').component('customFilter', {
  template: `
    <!-- Custom filter UI goes here -->
    <input type="text" ng-model="$ctrl.filterValue" ng-change="$ctrl.onFilterChanged()">
  `,
  bindings: {
    filterValue: '<',
    onFilterChanged: '&',
  },
});

2. Create a custom cell renderer to display the filter UI:

javascriptCopy code
// CustomFilterRenderer.js
angular.module('app').directive('customFilterRenderer', function () {
  return {
    template: `
      <div>
        <div ag-grid="gridOptions" class="ag-theme-alpine"></div>
      </div>
    `,
    scope: true,
    link: function (scope, element, attrs) {
      // Set up ag-Grid
      var columnDefs = [
        // Other column definitions...
        {
          headerName: 'Custom Filter',
          field: 'fieldName', // Replace 'fieldName' with your actual field name
          filter: 'customFilter',
          filterParams: {
            filterValue: null,
            cellRenderer: function () {
              return '<custom-filter filter-value="filterParams.filterValue" on-filter-changed="filterParams.onFilterChanged"></custom-filter>';
            },
            onFilterChanged: function () {
              // Custom filtering logic here
              var filterValue = this.filterValue; // Value from the custom filter input
              scope.$emit('customFilterChanged', filterValue); // Emit event to notify grid of filter change
            },
          },
        },
      ];

      var gridOptions = {
        // Other grid options...
        columnDefs: columnDefs,
      };

      new agGrid.Grid(element[0].querySelector('.ag-theme-alpine'), gridOptions);
    },
  };
});

3. Add the custom filter renderer directive to your main view:

htmlCopy code
<!-- index.html -->
<div ng-controller="MainController">
  <div custom-filter-renderer></div>
</div>

4. Implement the custom filtering logic in your main controller:

javascriptCopy code
// MainController.js
angular.module('app').controller('MainController', function ($scope) {
  $scope.onCustomFilterChanged = function (event, filterValue) {
    // Update the grid data based on the custom filter value (filterValue)
    // You may use ag-Grid API (gridOptions.api.setQuickFilter) to apply the filter to the grid data
  };

  // Subscribe to the custom filter change event
  $scope.$on('customFilterChanged', $scope.onCustomFilterChanged);
});

In this example, we define a custom filter component called customFilter, a custom cell renderer that uses this component to display the filter UI, and a main controller to handle the custom filter changes.

Replace 'app' with your actual AngularJS module name, and 'fieldName' with the field name you want to filter. Also, adjust the filtering logic in the onFilterChanged function of the custom filter component and the onCustomFilterChanged function in the main controller to suit your filtering requirements.

Keep in mind that this example demonstrates how to create a custom filter UI and filtering logic. Depending on your specific use case and data, you may need to modify the filtering logic accordingly.