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

Answer 1

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