Skip to content Skip to sidebar Skip to footer

How To Catch Applied Column Filter In Angular Ui-grid

I'm working with ui-grid and server-side filtering. For each column I send a request to API with param based on filter value. By default param is empty var filterOptions = {

Solution 1:

The working code is

  gridApi.core.on.filterChanged( $scope, function() {

                // Declare vars
                var grid = this.grid;
                var columns = grid.columns;
                $scope.columnTitle = grid.columns[1].filters[0].term;
                $scope.columnDesc = grid.columns[2].filters[0].term;
                var columnType = grid.columns[3].filters[0].term;
                var columnStudy = grid.columns[4].filters[0].term;
                var columnPriority = grid.columns[5].filters[0].term;
                var columnSeverity = grid.columns[6].filters[0].term;
                var columnStatus = grid.columns[7].filters[0].term;
                var columnCreatedDate = grid.columns[8].filters[0].term;
                var columnModifiedDate = grid.columns[9].filters[0].term;

                // Create request for selectable filters
                var query = [];
                var string;
                function request (id, param) {

                    if(param === "title==" || param === "description=="){
                        query.push(param + "*" + id + "*")
                    } else {
                        query.push(param + id);
                    }

                    if (query.length <= 1){
                        return query
                    } else {
                        string = query.join(";");
                        return string;
                    }
                }

                // Define behavior for cancel filtering
                $scope.isfilterclear = true;

                angular.forEach(columns, function( col ) {
                    if(col.filters[0].term){
                        $scope.isfilterclear = false;
                    }
                });
                if($scope.isfilterclear) {
                    $timeout(function() {
                        $rootScope.refresh()
                    },500);
                }

                // Filter behavior for columns
                if($scope.columnTitle) {
                    $scope.$watch('columnTitle', function (newVal, oldVal) {
                        filterOptions.filterParam =  request(newVal, 'title==*');
                    }, true);
                    getData()
                }
                if($scope.columnDesc) {
                    $scope.$watch('columnDesc', function (newVal, oldVal) {
                        filterOptions.filterParam =  request(newVal, 'description==');
                    }, true);
                    getData()
                }
                if(columnType) {
                    filterOptions.filterParam = request(columnType, 'eventTypeId==');
                    getData();
                }
                if(columnStudy) {
                    filterOptions.filterParam = request(columnStudy, 'studyId==');
                    getData();
                }
                if(columnPriority) {
                    filterOptions.filterParam = request(columnPriority, 'priorityId==');
                    getData();
                }
                if(columnSeverity) {
                    filterOptions.filterParam = request(columnSeverity, 'severityId==');
                    getData();
                }
                if(columnStatus) {
                    filterOptions.filterParam = request(columnStatus, 'statusId==');
                    getData();
                }
                if(columnCreatedDate){
                    filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                    getData()
                }
                if(columnModifiedDate){
                    filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                    getData()
                }
            });

As you can see, I declared custom function with two params where I'm providing my request param for each call, I'm not sure about elegancy of this way but for two week I didn't find better solution


Post a Comment for "How To Catch Applied Column Filter In Angular Ui-grid"