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!

score 6 · Accepted Answer · answered Dec 01 '14 at 00:59

6

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!

answered Dec 01 '14 at 00:59

John

921
1
9
24

***.ngCell*** thats the exact css class to override. Worked like a charm. Thanks – Yogi Dec 09 '14 at 07:17

score 5 · Answer 2 · answered May 27 '15 at 00:36

5

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/

answered May 27 '15 at 00:36

Justin

3,255
3
22
20

Thanks, Justin. My ui-select dropdown list was behind the other elements of an Ionic list. append-to-body did the trick, – nfgf Jun 13 '15 at 00:29

Angular UI-Select in UI-Grid?

2 Answers2