I'm using angularjs and have a list of checkboxes that I need to able to filter my ag-grid on.
This works fine using radio buttons and calling api.setQuickFilter with the individual value. However, I'm not seeing a way to allow for multiple 'filters' (ie checkbox values stored in an array) to function with setQuickFilter. Is there another method I should be using to accomplish this?
Example:
[checkbox] Apple
[checkbox] Bee
[checkbox] Cheerios
Checking box Apple and Cheerios at the same time should return a grid filtered to only show rows that contain the word "Apple" OR "Cheerios".
Per ag-grid support, this is not possible out of the box - which contradicts some of the examples (albeit, non-working) found on ag-grid's documentation page (see https://www.ag-grid.com/javascript-grid-filtering/# .) They did suggest writing a custom function to accomplish this. However, I was able to get it to work through another method.
Solution: I was able to filter out the selections by writing a function within the controller (that searches through the grid array and compares elements) to recreate the grid data. Then calls setRowData with the new filtered array. I made the checkboxes call this function to add/remove the displayed rows.
Here's what the code looks like:
HTML
<div class="checkboxFilter" ng-repeat="filterItemName in filterItem">
<input type="checkbox" name="selectedCap[]" value="{{filterItemName}}" ng-checked="selection.indexOf(filterItemName) > -1" ng-click="$ctrl.chartData(filterItemName)" /> {{filterItemName}}
</div>
js
//defined elsewhere (i.e. $onLoad):
this.$scope.filterItem = gridFilterArray; //(checkbox items)
this.$scope.selection = [];
chartData(value){
//****this portion from https://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs?rq=1 *****
let idx = this.$scope.selection.indexOf(value);
// Is currently selected
if (idx > -1) {
this.$scope.selection.splice(idx, 1);
}
// Is newly selected
else {
this.$scope.selection.push(value);
}
//******end
let filteredArray = [];
//create new array of data to display based on filtered checkboxes
for(let x = 0; x < this.arrayData.length; x++) {
for(let y = 0; y < this.$scope.selection.length; y++) {
if (this.$scope.selection[y] === this.arrayData[x].fieldToCheck)
filteredArray.push(this.arrayData[x]);
}
}
if(this.$scope.selection.length === 0)
this.$scope.gridOptions.api.setRowData(this.arrayData);
else
this.$scope.gridOptions.api.setRowData(filteredArray);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.