Angular UI-Select in UI-Grid?

Question

I feel like I'm beating my head against a wall.

Anyone have an example of using ui-select inside of ui-grid? (3.0)

I'm having the hardest time utilizing ui-select inside of ui-grid, as a cellTemplate, ie:

{ field: "Job.JobTitle", displayName: "Job Title", enableCellEdit: true, editableCellTemplate: '<ui-select ng-model="job.selected" theme="select2" style="width:100%;"><ui-select-match placeholder="Select a job...">{{$select.selected.JobTitle}}</ui-select-match><ui-select-choices repeat="job in jobs | filter: $select.search"><div ng-bind-html="job.JobTitle | highlight: $select.search"></div></ui-select-choices></ui-select>' }

Any chance anyone out there has an example of ui-select inside ui-grid?

Thanks!

Answer 1

So after hours upon hours of fighting with this, I found the problem!

ui-grid-cell CSS class has overflow:hidden. Which means that my ui-select was hiding BEHIND the lower cells.

What fun, what fun. Now to override that little PITA!

Answer 2

Trick is

append-to-body="true"

But don't take it from me, take it from the best authority on this subject. Here is how its done.

http://brianhann.com/ui-grid-and-dropdowns/