CODEWITHSUNDEEP
angularjsangular-ui-grid
timtos
timtos

Reputation: 2305

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

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.

Upvotes: 5

Views: 6245

Answers (2)

thynctank
thynctank

Reputation: 338

Came across what I think OP was looking for, definitely what I was looking for, via http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef#properties_headercellfilter

It's annoying you don't seem to be able to modify only the dropdown template, you have to override the entire header cell template, but at least you can do that on a per-col basis.

Upvotes: 0

laurenOlga
laurenOlga

Reputation: 731

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);
      }

    }]
  }

]

Upvotes: 1

Related Questions