antonyboom antonyboom - 3 months ago 91
AngularJS Question

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 = {
filterBy: '&$filter=',
filterParam: ""
};

// and api call looks like

?$orderby=id-&pageSize=250&pageNbr=1&$filter=


if I setup any filter I send next request

param: filterOptions.filterParam = 'eventTypeId==' + evtTypeId

request: ?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2


So what I want is pretty simple idea, I want to check if filter is already applied and send a request like

?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2,studyId==1


but unfortunately I cannot catch any applied filters. I appreciate if somebody could help with my issue.

My code below

columnDef

$scope.gridOptions.columnDefs = [
{
field: 'title',
cellClass: getCellClass,
useExternalFiltering: true
}, {
field: 'description',
cellClass: getCellClass,
enableFiltering: true,
useExternalFiltering: true
}, {
displayName: 'Type',
field: 'eventType.name',
filter: {
selectOptions: $scope.eventType,
type: uiGridConstants.filter.SELECT

},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Study Name',
field: 'study.name',
filter: {
selectOptions: $scope.study,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Priority',
field: 'priority.name',
filter: {
selectOptions: $scope.priority,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Severity',
field: 'severity.name',
filter: {
selectOptions: $scope.severity,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Status',
field: 'status.name',
filter: {
selectOptions: $scope.status,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Created',
field: 'occuredDate',
width: '12%',
filterHeaderTemplate: '<div class="row ui-grid-filter-container">' +
'<div ng-repeat="colFilter in col.filters" class="col-md-6 col-sm-6 col-xs-6">' +
'<div custom-grid-date-filter-header></div></div></div>',
filters: [
{
name: 'From',
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL
},
{
name: 'To',
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL
}
],
cellFilter: 'date:"dd MMMM yyyy, h:mm:ss a"',
cellClass: getCellClass,
useExternalFiltering: false
}, {
displayName: 'Modified', field: 'createdDate',
width: '12%',
filterHeaderTemplate: '<div class="row ui-grid-filter-container">' +
'<div ng-repeat="colFilter in col.filters" class="col-md-6 col-sm-6 col-xs-6">' +
'<div custom-grid-date-filter-header></div></div></div>',
filters: [
{
name: 'From',
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL
},
{
name: 'To',
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL
}
],
cellFilter: 'date:"dd MMMM yyyy, h:mm:ss a"',
cellClass: getCellClass,
useExternalFiltering: false
}
];


RegisterApi

$scope.gridOptions.onRegisterApi = function (gridApi) {

$scope.gridApi = gridApi;

gridApi.selection.selectRow($scope.gridOptions.data[0]);

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNbr = '&pageNbr=' + newPage ;
paginationOptions.pageSize = '&pageSize=' + pageSize;
getData();
});

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

var grid = this.grid;

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

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

// Filter behavior
$scope.textFilter = grid.columns[1].filters[0].term;
if($scope.textFilter) {
$scope.$watch('textFilter', function (newVal, oldVal) {
filterOptions.filterParam = 'title==*' + newVal + "*";
}, true);
getData()
}

$scope.desFilter = grid.columns[2].filters[0].term;
if($scope.desFilter) {
$scope.$watch('desFilter', function (newVal, oldVal) {
filterOptions.filterParam = 'description==*' + newVal + "*";
}, true);
getData()
}

for (var et = 0; et < $scope.eventType.length; et ++){
var evtType = $scope.eventType[et].name;
var evtTypeId = $scope.eventType[et].id;
filterOptions.filterParam = 'eventTypeId==' + evtTypeId;

if( grid.columns[3].filters[0].term === evtType ) {
getData()
}
}

for (var stud = 0; stud < $scope.study.length; stud ++){
var study = $scope.study[stud].name;
var studyId = $scope.study[stud].id;
filterOptions.filterParam = 'studyId==' + studyId;

if( grid.columns[4].filters[0].term === study ) {
getData()
}
}

for (var pr = 0; pr < $scope.priority.length; pr ++){
var priority = $scope.priority[pr].name;
var priorityId = $scope.priority[pr].id;
filterOptions.filterParam = 'priorityId==' + priorityId;

if( grid.columns[5].filters[0].term === priority ) {
getData()
}
}

for (var sev = 0; sev < $scope.severity.length; sev ++){
var severity = $scope.severity[sev].name;
var severityId = $scope.severity[sev].id;
filterOptions.filterParam = 'severityId==' + severityId;

if( grid.columns[6].filters[0].term === severity ) {
getData()
}
}

for (var stat = 0; stat < $scope.status.length; stat ++){
var status = $scope.status[stat].name;
var statusId = $scope.status[stat].id;
filterOptions.filterParam = 'statusId==' + statusId;

if( grid.columns[7].filters[0].term === status ) {
getData()
}
}
});


Where getData() is

var getData = function () {

eventService.getEventsWithParams(
sortOptions.orderBy,
sortOptions.directions,
paginationOptions.pageSize,
paginationOptions.pageNbr,
filterOptions.filterBy,
filterOptions.filterParam
)
.then(function (data) {

$scope.gridOptions.data = data;

// ***
angular.forEach($scope.gridOptions.data, function (val) {
val.occuredDate = new Date(val.occuredDate);
});

// $interval whilst we wait for the grid to digest the data we just gave it
$interval(function () {
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}, 0, 1);

});
};


my plunker
(unfortunately I cannot provide the real API, but hope it will help anyhow)

Answer

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

Comments