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

Question

According to the documentation, https://www.ag-grid.com/best-angularjs-data-grid/index.php, if I set the angularCompileFilters option to true in a grid's options object, the template in a cellRenderer will be taken as an Angular directive.

However, I can only make the Angular compilation work for the cells - not the heading filters. Is it because it only works with the Ag-Grid-Enterprise version? Or is it simply a bug?

Besides, I do not see any properly-documented sample snippets for that as well.

mrtig mrtig · Accepted Answer · 2017-06-27T19:47:36

It works on filters too, you just need to set up a custom filter:

this.gridOptions = { 
    angularCompileFilters:true,
    columnDefs: [{
        headerName: "My Column",
        field: "MyColumn",
        filter: function () {
            this.init = function (params) {
                //init logic
            } 

            this.getGui = function () {
                return "<p ng-repeat=\"i in \'abc\'\">{{i}}</p>"
            }
            this.isFilterActive = function () { 
                return true; 
            }

            this.doesFilterPass = function (params) {
                //filter logic 
                return true;
            }
            this.getModel = function () {
                return { name: "" }
            }

            this.setModel = function (model) {
            }
      }
}

The string returned by getGui will be compiled as an angular component.

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

1 Answers