Search code examples
angularjsangular-ui-gridangular-filters

Angularjs ui-grid multiple filter from checkbox outside grid

I am using UIGrid. I would like to be able to filter the impact level column based on the checkbox inputs(which is outside the grid).Multiple checkbox can be selected.Any help on how I can achieve this.

Thanks for your help!

<body ng-controller="MainCtrl">
<input type="checkbox" style="inline">Pass
<input type="checkbox" style="inline">Fail
<input type="checkbox" style="inline">Not Evaluated

I have added a plunker :http://plnkr.co/edit/u9OFv7UvWa9XdSCGNyDE?p=preview

I want to filter the status column based on the checkbox selected and multiple checkbox's can be selected.

Solution

  • The UI Grid website shows an example of filtering a grid from an external source.

    I've created this example based on your code and the approach used in the link above. This filters the grid based on the checkbox(es) selected. When launched the grid is set to display all data.

    I've modified your HTML as follows:

    <body ng-controller="MainCtrl">
    <input type="checkbox" style="inline" ng-model="pass" ng-click="updateSelection()">Pass
    <input type="checkbox" style="inline" ng-model="fail" ng-click="updateSelection()">Fail
    <input type="checkbox" style="inline" ng-model="notEval" ng-click="updateSelection()">Not Evaluated

    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
</body>

    This binds the checkboxes to model attributes and provides a function to call when a select box is checked/unchecked. the ui-grid attribute is now bound to gridOptions so we can provide some additional parameters in the AngularJS code.

    The AngularJS code has been modified as follows:

    i. Define the attributes to bind the checkboxes to (they are initialized to true so that on load the grid displays all data):

    // Bindings for checkboxes
$scope.pass = true;
$scope.fail = true;
$scope.notEval = true;

    ii. Define a function which forces a refresh of the grid. This is called whenever a checkbox is checked/unchecked:

    // Function called when a checkbox is checked/unchecked
$scope.updateSelection = function() {
    // Refresh the grid (this forces the singleFilter function to be executed)
    $scope.gridApi.grid.refresh();
};

    iii. Define the following gridOptions. The onRegisterApi function lets us obtain a reference to gridApi (so that we can reference it in the updateSelection function above), and also defines the filterFunction function which contains our logic to filter the grid:

    $scope.gridOptions = {
    //enableFiltering: false,
    //
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
      $scope.gridApi.grid.registerRowsProcessor( $scope.filterFunction, 200 );
    },
 };

    iv. We can then define a filterFunction which contains the logic for filtering the grid based on the checkbox(es) selected:

    $scope.filterFunction = function( renderableRows ){
    // Build a list of valid values for the 'status' column based on the checkboxes that are checked
    var validValues = [];
    if ($scope.pass) {
        validValues.push('Pass');
    }
    if ($scope.fail) {
        validValues.push('Fail');
    }
    if ($scope.notEval) {
        validValues.push('Not Evaluated');
    }

    // Iterate over each grid row
    renderableRows.forEach( function( row ) {
        var match = false;
        // the 'status' column value for this row is one of the ones the user has selected based on the checkboxes
        if (validValues.indexOf(row.entity.status) > -1) {
            match = true;
        }
        // Hide any rows which have been filtered out
        if (!match){
            row.visible = false;
        }
    });
    // Return the rows to render in the grid (this will contain all rows, but only the ones where 'visible' = true will be rendered)
    return renderableRows;
};