Angular ui-grid column dropdown select filter

Question

I am trying to make a dropdown filter for angular ui-grid. I originally found the how-to article here, and upon not being able to work it, i went back to the source to try to work it. I am still having no success. the column filter just looks like a regular filter, without any dropdown. Can someone help me fix it up?

Column def:

{
 field: 'sex'
 , displayName: 'SEX'
 , width: '120'
 , type: uiGridConstants.filter.SELECT
 , filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ]  }
}

This is how it looks (if I click the input, its just accepts text)

Is there something else im missing?

-----UPDATE WITH MY WHOLE SETUP-----------

//options for the main grid
      $scope.gridOptions = {
        enableFiltering: true,
        multiSelect: false,
        onRegisterApi: function(gridApi){
          $scope.gridApi = gridApi; //so we can use gridapi functions of ui-grid

          //handler for clicking rows and getting row object
          gridApi.selection.on.rowSelectionChanged($scope, function(row){
            thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
            console.log(thisRow[0].uniqueId)

          });
        },
        data: 'myData'
        , rowTemplate: rowTemplate()
        , columnDefs: [
          {
            field: 'alert'
            , displayName: 'ALERTS'
            , width: '70'
            , headerCellClass: $scope.highlightFilteredHeader
            ,sort: {
                direction: uiGridConstants.DESC,
                priority: 1
              }

          },
          {
            field: 'firstName'
            , displayName: 'FIRST NAME'
            ,  width: '130'
            , headerCellClass: $scope.highlightFilteredHeader

          },
          {

            field: 'lastName'
            , displayName: 'LAST NAME'
            ,  width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'dob'
            , displayName: 'DOB'
            ,  width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {

            field: 'careCoordinatorName'
            , displayName: 'Care Coordinator Name'
            , width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'userStatus'
            , displayName: 'STATUS'
            , width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'homeNum'
            , displayName: 'PATIENT HOME #'
            , width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'cellNum'
            , displayName: 'PATIENT CELL #'
            , width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'mi'
            , displayName: 'MI'

            , width: '60'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'sex'
            , displayName: 'SEX'
            , width: '120'
            , type: uiGridConstants.filter.SELECT
            , filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ]  }
          }

        ]

      };

Row template (if relevant):

function rowTemplate() {
        return '<div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
      }

Grid HTML

<div id="grid1" ui-grid="gridOptions" ui-grid-importer class="grid" ui-grid-resize-columns ui-grid-move-columns ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-paging external-scopes="gridHandlers"></div>

------UPDATE 2----------- After changing coldef to

{
field: 'sex',
displayName: 'SEX',
width: '120',
//type: uiGridConstants.filter.SELECT,
filter: {
    type: uiGridConstants.filter.SELECT, // <- move this to here
    selectOptions: [
        { value: 'male', label: 'male' },
        { value: 'female', label: 'female' }
    ]
}

}

This is how my column now looks (with another column to the left for comparison)

------UPDATE 3----------- When I inspected the area, I could see the code for the select. So no we know its there, its just not showing

-----UPDATE 4---------- Materializecss was making it invisible. it was there the whole time

  select {
display: inline !important;
height: 15px !important;

}

solved the problem

Answer 1

Ah, I believe your problem is that the type option for the coldef is in the wrong location. I've expanded the code a bit for readability; you can easily get lost in the objects if they are too compressed.

What you have:

{
    field: 'sex',
    displayName: 'SEX',
    width: '120',
    type: uiGridConstants.filter.SELECT,
    filter: {
        selectOptions: [
            { value: 'male', label: 'male' },
            { value: 'female', label: 'female' }
        ]
    }
}

What it should be:

{
    field: 'sex',
    displayName: 'SEX',
    width: '120',
    //type: uiGridConstants.filter.SELECT,
    filter: {
        type: uiGridConstants.filter.SELECT, // <- move this to here
        selectOptions: [
            { value: 'male', label: 'male' },
            { value: 'female', label: 'female' }
        ]
    }
}