CODEWITHSUNDEEP
angularjsangular-uiangular-ui-grid
john c. j.
john c. j.

Reputation: 1175

Multiple dropdown filters in the same column

First of all, here is the image:

enter image description here

... and link to the live example.

Yes, the live example doesn't work, that's why I post the question to the SO.

Each item in the left column can have one or multiple colors, specified in the json file. In my example, the sky is blue, the sun is yellow, the grass is green, and the bike is blue and yellow. You can see it directly in the file itself.

What I want?

enter image description here

How it may be done?

Although I believe that live example is more comfortable to use, I also post all the code directly here.

index.html

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
        <script src="http://ui-grid.info/release/ui-grid.js"></script>
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
        <link rel="stylesheet" href="app.css" type="text/css">
    </head>
    <body>

        <div ng-controller="MainCtrl">
            <br>
            <br>
            <button id='toggleFiltering' ng-click="toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
            <div id="grid1" ui-grid="gridOptions" class="grid"></div>
        </div>

        <script src="app.js"></script>
    </body>
</html>

test.json

[
    {
        "name": "sky",
        "color": {
            "color1": "blue",
            "color2": ""
        }
    },
    {
        "name": "sun",
        "color": {
            "color1": "yellow",
            "color2": ""
        }
    },
    {
        "name": "grass",
        "color": {
            "color1": "green",
            "color2": ""
        }
    },
    {
        "name": "john's bike",
        "color": {
            "color1": "blue",
            "color2": "yellow"
        }
    }
]

app.css

.header-filtered {
    color: blue;
}

app.js

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {

    $scope.gridOptions = {
        enableFiltering: true,
        onRegisterApi: function(gridApi){
            $scope.gridApi = gridApi;
        },
        columnDefs: [

            { field: 'name', headerCellClass: $scope.highlightFilteredHeader },


            // THE COLORS GOES HERE

            { field: 'color', filters: [
                {
                        type: uiGridConstants.filter.SELECT,
                        selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
                },
                {
                        type: uiGridConstants.filter.SELECT,
                        selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
                }
            ], cellFilter: 'mapColor', headerCellClass: $scope.highlightFilteredHeader},

        ]
    };

    $http.get('https://rawgit.com/johncja/b8bf0cf099f5437025a5/raw/42c80882674bd5700fd2bd399992e8eab9afb4a8/test.json')
        .success(function(data) {
            $scope.gridOptions.data = data;

            data.forEach( function addDates( row, index ){

                if (row.color==='blue') {
                    row.color = '1';
                } else if (row.color==='yellow') {
                    row.color = '2';
                } else if (row.color==='green') {
                    row.color = '3';
                }

            });
        });

    $scope.toggleFiltering = function(){
        $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
        $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
    };
}])
.filter('mapColor', function() {
    var colorHash = {
        1: 'blue',
        2: 'yellow',
        3: 'green'
    };

    return function(input) {
        if (!input){
            return '';
        } else {
            return colorHash[input];
        }
    };
});

Upvotes: 0

Views: 654

Answers (1)

Vinit Solanki
Vinit Solanki

Reputation: 2023

I have use ag-grid earlier for exactly same as your requirements(wants a filtering options on column).

Upvotes: 1

Related Questions