How to filter with choices in Ag-Grid?

Question

Using the Ag-Grid with AngularJS, the objective is to filter a column with defined choices. For example, I have a column Status with possible values of valid and invalid. This column uses a cell template that displays icons: a checkmark for valid and a cross for invalid. Using a cell template, the filter heading does not seems to offer the values found in data, for this column, as options.

With Ui-Grid we had the possibility to use choices inside column definition with templateFields: ['valid', 'invalid'], but with Ag-Grid no equivalent seems to exist.

Another alternative was to use a custom filter, but the problem is to use them with server-side filtering. Unfortunately, it seems that it's not possible by design. In Ag-Grid library, within execute() function of FilterStage, we can see:

if (this.gridOptionsWrapper.isEnableServerSideFilter()) {
    filterActive = false;
}

This is the kind of goal to achieve, where a <select> input is available in filter and data is filtered by the selected option:

Answer 1

I had same requirement, i wrote some custom code it may help--

add filter: LetterFilter in column property.

below code display Successful and Unsuccessful in filter.

 $scope.Publishstatus = [{'checked':false,'data':'Successful'},{'checked':false,'data':'Unsuccessful'}];


          $scope.generateHtml = function(thisObj){
                            angular.forEach($scope.Publishstatus, function(
                                    value) {
                                thisObj.valuesToShow.push(value);
                            });

                            var HTMLStr = '<div>'
                                    + '<div class="ag-filter-header-container"><label><input id="selectAll" type="checkbox" checked class="ag-filter-checkbox">(Select All)</label></div>'
                                    + '<div class="ag-filter-list-viewport">'
                                    + '<div class="ag-filter-list-container" style="height: 140px;">';

                            var counter = 0;
                            angular
                                    .forEach(
                                            thisObj.valuesToShow,
                                            function(value) {
                                                HTMLStr = HTMLStr
                                                        + '<div class="ag-filter-item" style="top: '
                                                        + counter
                                                        + 'px;"><label><input id="letterStatusId"  type="checkbox" checked class="ag-filter-checkbox" filter-checkbox="'
                                                        + value.checked
                                                        + '"><span class="ag-filter-value">'
                                                        + value.data
                                                        + '</span></label></div>';
                                            });
                            HTMLStr = HTMLStr + '</div>' + '</div>'
                                    + '</div>';

                            return HTMLStr;

                        }

     function LetterFilter() {}

       LetterFilter.prototype.init = function(params) {
                            this.valueGetter = params.valueGetter;
                            this.filterText = null;
                            this.valuesToFilter = [];
                            this.valuesToShow = [];
                            this.setupGui(params);
                        };
     LetterFilter.prototype.setupGui = function(params) {
                            var that = this;
                            this.gui = document.createElement('div');
                            this.gui.innerHTML = $scope.generateHtml(this);

                            this.letterStatusCheckboxes = this.gui.querySelectorAll('#letterStatusId');

                            $scope.singleCheckBocListener(this,params);

                            this.selectAllCheckbox = this.gui
                                    .querySelector('#selectAll');
                            this.selectAllCheckbox.addEventListener(
                                    'change', selectAllListener);

                            this.filterActive = false;



                            function selectAllListener(event) {
                                var checkedValue = $(event.target).is(':checked');
                                if (checkedValue) {
                                    // set all values checked in sort array
                                    angular.forEach(that.valuesToShow,
                                            function(value) {
                                                value.checked = true;
                                            });
                                    // set all values as checked in GUI
                                    angular.forEach(that.letterStatusCheckboxes,function(value) {
                                                $(value).prop('checked',true);
                                            });
                                    that.filterActive = false;
                                } else {
                                    // add all values checked in sort array
                                    angular.forEach(that.valuesToShow,function(value) {
                                                value.checked = false;
                                            });
                                    // set all values as checked in GUI
                                    angular.forEach(that.letterStatusCheckboxes,function(value) {
                                                $(value).prop('checked',false);
                                            });

                                    that.filterActive = true;
                                }
                                params.filterChangedCallback();
                            }
                        };

        LetterFilter.prototype.getGui = function() {
                            return this.gui;
                        };


       LetterFilter.prototype.doesFilterPass = function(
                                params) {
                            var valuesToFilter = this.valuesToShow;
                            var returnValue = false;
                            var valueGetter = this.valueGetter;
                            var value = valueGetter(params);
                            valuesToFilter.forEach(function(entry) {
                                if (entry.checked
                                        && entry.data === "Successful"
                                        && value === "") {
                                    returnValue = true;
                                }
                                if (entry.checked
                                        && entry.data === "Unsuccessful"
                                        && value !== "") {
                                    returnValue = true;
                                }
                            });
                            return returnValue;
                        };

        LetterFilter.prototype.isFilterActive =   function() {
                            return this.filterActive;
                        };


         $scope.singleCheckBocListener = function(thisObj,param){
                                       angular.forEach(thisObj.letterStatusCheckboxes,
                                    function(value) {
                                        value.addEventListener('change',checkBoxListener);
                                    });

                            function checkBoxListener(event) {
                                var checkedValue = $(event.target).is(':checked');
                                var valueFromField = $(event.target).parent().text();
                                $scope.valueFromField = $(event.target).parent().text();
                                angular.forEach(thisObj.valuesToShow,function(value) {
                                    if (value.data === valueFromField) {
                                        value.checked = checkedValue;
                                    }
                                });
                                var isAllChecked = true;
                                var isAllNotChecked = true;
                                angular.forEach($scope.Publishstatus,function(value) {
                                            if (!value.checked) {
                                                isAllChecked = false;
                                            } else {
                                                isAllNotChecked = false;
                                            }
                                        });

                thisObj.filterActive = true;                                                       $scope.isCheckedBox(isAllChecked,isAllNotChecked,thisObj)
                                param.filterChangedCallback();
                            }
                        }

            $scope.isCheckedBox = function(isAllChecked,isAllNotChecked,thisObj){
                            if (isAllChecked) {
                                // all items are selected
                                $(thisObj.selectAllCheckbox).prop('checked', true);
                                $(thisObj.selectAllCheckbox).prop('indeterminate', false);
                                thisObj.filterActive = false;
                            } else if (isAllNotChecked) {
                                // all items are not selected
                                $(thisObj.selectAllCheckbox).prop('checked', false);
                                $(thisObj.selectAllCheckbox).prop('indeterminate', false);
                            } else {
                                // some items selected, other not
                                $(thisObj.selectAllCheckbox).prop('checked', false);
                                $(thisObj.selectAllCheckbox).prop('indeterminate', true);
                            }
                        }