Menu
I think this is most likely very simple but I cannot find any clear documentation on how to add a filter outside of the 'filterText' that is shown on their website. What I am trying to do is something as simple as this:
$scope.filterOptions = { filter: $scope.myFilter, // <- How to do something like this? useExternalFilter: true } $scope.gridOptions = { data: 'entries', enableColumnResize: false, multiSelect: false, enableSorting: false, selectedItems: $scope.selectedEntries, filterOptions: $scope.filterOptions } $scope.lowerLimit = 50; // My Filter $scope.myFilter = function(entry) { if (entry < $scope.lowerLimit) { return false; } return true; } Edit: Or maybe if I could filter the datasource somehow? I tried this:
$scope.gridOptions = { data: 'entries | filter: myFilter', enableColumnResize: false, multiSelect: false, enableSorting: false, selectedItems: $scope.selectedEntries, } But it is throwing quite a few errors.
593
From the RECORD LIST section in the COMPONENT CONFIGURATION pane, select the Department user filter in the User Filter dropdown. Note: Replace Department with the name of the user filter configured on your record type. The Department user filter is applied to the grid.
Filtering allows you to view particular records based on filter criteria. To enable filtering in the Grid, set the allowFiltering to true. Filtering options can be configured through filterSettings .
Configuring Filters on Columns The property can have one of the following values: boolean : Set to true to enable the default filter. The default is Text Filter for AG Grid Community and Set Filter for AG Grid Enterprise. string / Component : Provide a specific filter to use instead of the default filter.
If you want to enable filters on all columns, you should set a filter on the Default Column Definition. The following code snippet shows setting filter=true for all columns via the defaultColDef and then setting filter=false for the Sport column, so all columns have a filter except Sport.
You can use angular to bind to the filterOptions.filterText variable. There's a plunker here to demonstrate: http://plnkr.co/edit/PHdBhF?p=preview
I'll post the same code below:
// main.js var app = angular.module('myApp', ['ngGrid']); app.controller('MyCtrl', function($scope) { $scope.filterOptions = { filterText: '' }; $scope.myData = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}]; $scope.gridOptions = { data: 'myData', filterOptions: $scope.filterOptions }; }); The above should be about identical to the plunkers on the docs page.
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="utf-8"> <title>Custom Plunker</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body ng-controller="MyCtrl"> <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" /> <br/> <br/> <div class="gridStyle" ng-grid="gridOptions"></div> </body> </html> Notice ng-model="filterOptions.filterText" on the <input ...>. That's all it takes!
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
