Angular UI Grid: How to create a pre-populated dropdown menu for column filtering

Question

I am looking for some help regarding a feature of the Angular UI Grid. Specifically I am exploring filtering and while I was able to succes

Answer 1

You can put a pulldown menu in the header via the headerCellTemplate in your columnDefs

  columnDefs: [
     {field:'myField',headerCellTempalte: 'mypulldowntemplate.html"...}
  ]

mypulldowntemplate.html

  

  
 

    {{ col.displayName CUSTOM_FILTERS }}
    

    
    
      
  ....

yourFilterFunction() can do whatever it is you want to have filtered. Perhaps just by setting some variables that you use in a custom filter you assign to the grid. You can find an example of setting a condition in your custom filter on the ui Grid Tutorial here http://ui-grid.info/docs/#/tutorial/103_filtering