TrNgGrid - Dropdown Column Filter

Technologies: 

• AngularJS (v1.3.1+)
• TrNgGrid (v3.1+)

Problem:

I want an easy, reusable way to create a dropdown list as a column filter for any TrNgGrid table.

Demo:

Working Demo in Plunker

Solution:

1) Create a  dropdown-filter-tmpl.html template file to customize the column header display.

<div>
    <div class="tr-ng-title" ng-class="{'tr-ng-sort': gridOptions.enableSorting}" ng-click="!((gridOptions.enableSorting && columnOptions.enableSorting!==false)||columnOptions.enableSorting) || toggleSorting(columnOptions.fieldName)">
        <div ng-show="(gridOptions.enableSorting && columnOptions.enableSorting!==false)||columnOptions.enableSorting"
             ng-class="{'tr-ng-sort-active text-info': gridOptions.orderBy==columnOptions.fieldName, 'tr-ng-sort-inactive text-muted glyphicon glyphicon-chevron-down': gridOptions.orderBy!=columnOptions.fieldName, 'tr-ng-sort-order-normal glyphicon glyphicon-chevron-up': gridOptions.orderBy==columnOptions.fieldName && !gridOptions.orderByReverse, 'tr-ng-sort-order-reverse glyphicon glyphicon-chevron-down': gridOptions.orderBy==columnOptions.fieldName && gridOptions.orderByReverse}"
             class="tr-ng-sort-inactive text-muted glyphicon glyphicon-chevron-down"></div>
        {{label}}
    </div>
    <div class="tr-ng-column-filter" ng-show="(gridOptions.enableFiltering && columnOptions.enableFiltering !== false) || columnOptions.enableFiltering">
        <select class="form-control input-sm" ng-model="columnOptions.filter">
            <option value="" selected></option>
            <option ng-repeat="item in items">{{item.predicateObject}}</option>
        </select>
    </div>
</div>

2) Create a new dropdownFilter directive to extend the functionality of TrNgGrid. Be sure to set the templateUrl variable to point to the template file created in Step #1 above.

angular.module("trNgGrid").directive("dropdownFilter", ["$filter", "$parse",
    function ($filter, $parse) {

        var templateUrl = "/directives/trng-grid/dropdown-filter-tmpl.html";

        return {
            restrict: "E",
            require: "^trNgGrid",
            scope: false,
            templateUrl: templateUrl,
            link: function (scope, element, attrs, table) {
                var field = scope.columnOptions.fieldName;
                var label = (angular.isDefined(scope.columnOptions.displayName) && scope.columnOptions.displayName != null ? scope.columnOptions.displayName : field);
                scope.label = label;

                function createDropdown(collection) {
                    collection = $filter("nonBlank")(collection, field);
                    collection = $filter("unique")(collection, field);
                    collection = $filter("orderBy")(collection, field);

                    angular.forEach(collection, function (item) {
                        item.predicateObject = $parse(field)(item);
                    });

                    scope.items = collection;
                }

                // if asked to load list directly
                if (angular.isDefined(attrs.onDataRequired) && attrs.onDataRequired.length > 0) {
                    scope.$eval(attrs.onDataRequired)(field).then(function (data) {
                        createDropdown(data);
                    });
                } else { // get it from the client-side items
                    scope.$watchCollection("gridOptions.items", function (newValue, oldValue) {
                        createDropdown(angular.copy(newValue));
                    });
                }
            }
        };
    }
]);

angular.module("trNgGrid").filter("nonBlank", ["$parse", 
    function ($parse) {

        return function (items, filterOn) {
            var newItems = [];

            if (filterOn === false) {
                return items;
            }

            if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
                angular.forEach(items, function (item) {
                    var value = $parse(filterOn)(item);

                    if (value !== "" && angular.isDefined(value)) {
                        newItems.push(item);
                    }
                });
            }

            return newItems;
        };

    }
]);
angular.module("trNgGrid").filter("unique", ["$parse", 
    function ($parse) {

        return function (items, filterOn, scope) {
            var newItems = [];

            if (filterOn === false) {
                return items;
            }

            if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {

                var extractValueToCompare = function (item) {
                    var result = item;

                    if (angular.isObject(item) && angular.isString(filterOn)) {
                        return $parse(filterOn)(item);
                    }

                    return result;
                };

                angular.forEach(items, function (item) {
                    var isDuplicate = false;
                    var value = $parse(filterOn)(item);

                    for (var i = 0; i < newItems.length; i++) {
                        if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(value))) {
                            isDuplicate = true;
                            break;
                        }
                    }

                    if (!isDuplicate) {
                        newItems.push(item);
                    }

                });
            }

            return newItems;
        };
    }
]);

3) In your TrNgGrid HTML table, add the dropdown-filter  tag (which points to the directive created in Step #2). This should go inside the TABLE > THEAD > TH element.

<th field-name="stateName" display-name="State"><dropdown-filter /></th>

That's it! Let me know if you have questions or comments!