how to add drop down on header using grid (not input field)?

Question

I am trying to use Ui-grid from this link

http://ui-grid.info/docs/#/tutorial/101_intro.

I make a simple example of ui-grid in plunker..I need to add select box on "Gender" as filter .If I select "male" it show only data who is "m or If I select "female" it show filter data only "f" value here is my code

Plunker https://plnkr.co/edit/DqBgHFnwLpYM5pvg0f56?p=preview I try like that but not work

type: uiGridConstants.filter.SELECT,
     selectOptions: [ 
         { value: 'm', label: 'male' },
         { value: 'F', label: 'female' }
     ];

I don't need input field on gender .I need select box or dropdown on gender column

I see no problem there , it works . What problem did you have ? — katmanco, Jan 05 '16 at 08:05
I need to add select box ..mean filter on header..please check this plunker http://plnkr.co/edit/?p=preview — user5711656, Jan 05 '16 at 08:09
gender have drop down ..to filter male and female I need to do the same thing in my Question plunker — user5711656, Jan 05 '16 at 08:10

Eria · Accepted Answer · 2016-01-05T08:33:26.983

First you need to add uiGridConstants as parameter in your controller declaration, so you can use it. Then, you will be able to do what you want.

angular.module('app',['ngTouch', 'ui.grid'])
    .controller('MainCtrl',function( $scope, uiGridConstants ){

    // ...

    $scope.gridOptions = {
         enableFiltering: true,
         columnDefs: [
             {
                 field: 'gender', 
                 displayName:'Gender',
                 filter: { 
                     type: uiGridConstants.filter.SELECT,
                     selectOptions: [ 
                         { value: 'm', label: 'male' },
                         { value: 'F', label: 'female' }
                     ];
                 }
             },
             {field: 'name', displayName:'First'},
             {field: 'lastname', displayName:'Second',enableSorting: false}
         ]
    };

    // ...
}

I'll give you an advice : to debug angular code, or any javascript code, use a tool like Firebug (for Mozilla Firefox). It will show you the javascript errors encountered when you change your code and plunker try to apply it. In this case, you would have seen this :

Error: uiGridConstants is not defined
@https://run.plnkr.co/8CvvTtAR4QY8O2Ln/app.js:30:11

I just forked your plunker to show you the result. But it's pretty much the same piece of code that I pasted above. — Eria, Jan 05 '16 at 08:29

how to add drop down on header using grid (not input field)?

1 Answers1