Search code examples
cssangularjsangular-ui-grid

Modify CSS of <select> in Angular UI-grid

I have an angular ui-grid that has a in the filter section built out like this:

, filter: {
           type: uiGridConstants.filter.SELECT,
           selectOptions: [
             { value: 'male', label: 'male' },
             { value: 'female', label: 'female' }
            ]
          }

That looks ike this:

first image

I have tried every way I can think of to modify the CSS to make it look like this:

second image

But no matter what I do, I cant seem to style any aspect of the dropdown... Has anyone had any success trying to style a ui-grid dropdown?

-----EDIT 1-----

Here is an ultra-simplified pen

Solution

  • It appears UI-Grid is not as customizable as one might think when looking at their front page.

    Here is the list of customizable elements in UI-Grid and, for the moment, filters are not one of them.

    I would have expected a component built on AngularJS to use a directive that would allow complete replacement of the filters template but it either doesn't exist yet or I wasn't able to find it.

    Edit: After some more digging I found headerCellTemplate buried deep into their docs. Not entirely sure how one would use it, but I think it holds the key to the treasure chest.

    The worst part is that the filters they use are built using plain <select> and <option> tags, which are a real pain to style. A good starting point would be this awesome answer and the accepted one, from the same question.

    As you might notice, copy/pasting the code from the answer I linked works, but it's a pain to implement and maintain.

    I must admit I would consider alternatives to UI-Grid in your position, such as Smart table or ngTable. I'd also mention Swimlane's ngx-datatable for the incredible performances they have achieved (tables moving smoothly with 100k rows - that's something!).

    Best of luck!