Hi, I need to filter out some company name based on location('SB' or 'CO'). So i used custom filter in ui-grid. It returns the entire value of each key and only when it completes the mapping. I have attached the output. Plunker code demo: link Used: Angular - v1.4.2 ui-grid - v3.0.7
application.controller('ApplicationController', ['$scope', 'uiGridConstants', 'ApplicationService',
function ($scope, uiGridConstants, ApplicationService) {
$scope.message = "Welcome";
$scope.gridOptions = {
showGridFooter: true,
showColumnFooter: true,
enableFiltering: true
};
$scope.gridOptions.columnDefs = [
{
name: 'company',
field: 'company',
filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-dropdown></div></div>',
filter: {
term: '',
options: [{ id: 'CO', value: 'Navy' }, { id: 'CO', value: 'Army' }, { id: 'SB', value: 'Hp' }]
},
cellFilter: 'mapCompany'
}
];
ApplicationService.getData(function (response) {
if (response) {
$scope.gridOptions.data = response.data;
response.data.forEach(function addDates(row, index) {
var companyName = row.company;
if (companyName === 'Navy')
row.company = 'CO';
else if (companyName === 'Army')
row.company = 'CO';
else if (companyName === 'Hp')
row.company = 'SB';
});
}
else {
$scope.gridOptions.data = null;
}
});
}
])
.filter('mapCompany', function () {
var genderHash = {
'CO': ['Navy'],
'CO': ['Army'],
'SB': ['Hp']
};
return function (input) {
if (!input) {
return '';
}
else {
return genderHash[input];
}
};
})
.directive('myCustomDropdown', function () {
return {
template: '<input ng-model="colFilter.term" >'
};
})
filter: {
condition: function(searchTerm,cellValue) {
if( !searchTerm || searchTerm === '') {
return true;
}
if(searchTerm === 'CO') {
if(cellValue === 'Navy' || cellValue === 'Army') {
return true;
}
}
if(searchTerm === 'SB') {
if(cellValue === 'Hp') {
return true;
}
}
return false;
}
}
I should have used filter parameter in gridOptions instead of cellFilter with Hashmap