Angular UI Grid - style the column menu/ apply a template

Question

I want to use the angularjs ui-grid and have one condition: It has to be possible to style a column filter menu.

In the documentation it is only explained how to add new items to a column menu but not how to change the design or add other controls. If we look at the example it should be possible for instance to open a column menu that can display two custom styled radio buttons (male, female) with two buttons two accept or decline the changes. If the changes are accepted, the filter should be applied.

Is it somehow possible to use templates for the column menu as it is possible for the columns header? How to create a custom column menu?

Thank you.

Answer 1

See plunker for solution.

Within your columnDefs you just need to add menuItems. I had trouble understanding from your question what exactly you wanted these additional dropdown options to do so I've modeled the general format for you in a very simple example where the first custom option does nothing but display in your menu and the second activates an alert containing the column name. Please let me know if this is (not) sufficient.

For a full list of supported attributes for menuItems see this tutorial.

columnDefs: [
  {
    field: 'name',
    menuItems: [{
      title: 'Custom Nothing'
    }, {
      title: 'Column Name',
      action: function() {
        alert(this.context.col.displayName);
      }

    }]
  }

]