We have a requirement to filter the contents of a grid using values/inputs that are not embedded into the UI Grid Column headers. The filtering must occur on the values that are displayed or in other word have been "filtered" for presentment. I have been able to successfully filter on values that don't have a cellFilter specified by specifying a filter method using the registerRowsProcessor.
$scope.externalFilterImpl = ( renderableRows ) => {
if($scope.externalFilterValues.name.length>0)
{
// Case insensitive matching
var matcher = new RegExp($scope.externalFilterValues.name, "i");
renderableRows.forEach( function( row ) {
var match = false;
debugger;
if ( row.entity["id"].match(matcher) ){
//var value = $scope.gridApi.grid.getCellDisplayValue(row, "id");
//if ( value.match(matcher) ){
match = true;
}
if ( !match ){
row.visible = false;
}
});
}
return renderableRows;
};
The code expects to filter on the display value (filtered value) for the column with the columnDef field property of "id". The columnDef for "id" appears as follows:
{
field: "id",
cellClass: "cellContent",
displayName: $translate.instant('tableHeading.item'),
enableColumnMenu: false,
enableHiding: false,
suppressRemoveSort: true,
filter: {
placeholder: "Enter a name search"
},
cellFilter: 'translateIds:"itemIds"',
filterCellFiltered:true,
sortCellFiltered:true,
sort: {
direction: uiGridConstants.ASC,
priority: 0,
},
cellTemplate: `<div class="ui-grid-cell-contents">
{{COL_FIELD CUSTOM_FILTERS}}
</div>`
}
Any assistance would be greatly appreciated.