Comments on: UI-Grid and Dropdowns

By: Gajendrasinh Zala

Gajendrasinh Zala — Mon, 12 Nov 2018 10:14:00 +0000

Hello,

When i am click on select all checkbox its allow edit mode with multiple drop-down in same column.

Anyone have idea let me know

By: KhAk

KhAk — Mon, 16 Apr 2018 16:57:00 +0000

Hi Brian
I too need a way to enter a value which is not in options. Something like editable combo. Is there a way?

By: Zohaib Asghar

Zohaib Asghar — Fri, 09 Mar 2018 13:29:00 +0000

Hi Brian!
Hope you are doing fine.
I am having a problem with the dropdown inside UI-Grid. When the cell is on edit mode, the focus does not moves to the dropdown. I have to click on the dropdown to make it focusable.
Can you please suggest a workaround?

Thanks.

By: Marco Kaufmann

Marco Kaufmann — Tue, 28 Nov 2017 18:02:00 +0000

Hi Brian,

I’d like to point out that when you add ui-grid-cellNav to the grid, it does not work anymore. The ui-select does not collapse the choices when you click some other cell in the grid, probably because the ui-grid-cellNav intercepts the event. Here is the plunker:

https://plnkr.co/edit/Ab1bMhXl1ExKgsWusnzo

Took me a while to figure out that cellNav is the problem. Any ideas how to fix this?

By: Malek Emam

Malek Emam — Mon, 21 Aug 2017 09:49:00 +0000

hey ,
I use complex array
[
{ id: 0, value: ‘male’ },
{ id: 1, value: ‘female’ },
{ id: 2, value: ‘other’ }
]
i had a problem after i edit the dropdown i got the object not the property of the obj
https://plnkr.co/edit/M9AOH5DzRSkL38uGeNZU?p=preview

May you help me

By: Malek Emam

Malek Emam — Mon, 21 Aug 2017 09:43:00 +0000

Hi Brian
I use complex array
[
{ id: 0, value: ‘male’ },
{ id: 1, value: ‘female’ },
{ id: 2, value: ‘other’ }
]
i had a problem after i edit the dropdown i got the object not the property of the obj
https://plnkr.co/edit/M9AOH5DzRSkL38uGeNZU?p=preview

By: David Brown

David Brown — Mon, 22 May 2017 13:16:00 +0000

Howdy Brian, very cool way of solving this problem. Easier than datatables.net. A pointer or 2 would help where to read how dynamically add to the pulldown with additional JSON from the server instead of hard coded.
editDropdownOptionsArray: [
‘male’,
‘female’,
‘other’
]

By: Leandro Zago

Leandro Zago — Mon, 15 May 2017 12:36:00 +0000

Hi brian,
I did this example but using a complex JSON, and worked just fine, but when i tried to use this scenario inside the modal my ui-select disappera when I click to choose the option: my stackoverflow question: http://stackoverflow.com/questions/43979521/ui-grid-with-ui-select-inside-a-modal-the-dropdown-dissapear-when-you-try-to-op
and my pluker: https://plnkr.co/edit/rH6g6LriNi9ygUiIZV6h?p=preview

Thanks man

By: Ed Gonzales

Ed Gonzales — Mon, 03 Apr 2017 16:06:00 +0000

Using a complex object:
[
{ “id”:0,”value”:”male” },
{ “id”:1,”value”:”female” },
{ “id”:2,”value”:”other” }
]
in ui-select, ui-grid, i noticed that when the
dropdown is expanded (clicked), the first item on the list is the one that’s always highlighted rather than what was previously selected. Is there a way to
bind what was selected to the item on the list and highlight it. In this example http://plnkr.co/edit/BpOEMMTXOGHPkgfto6Or?p=preview, “male” is always highlighted even if “female” or “other” was selected. This does not happen if the data is from basic array of strings. Any way to fix this?

By: f_lun

f_lun — Wed, 29 Mar 2017 22:05:00 +0000

Nope, I gave up on this feature, wasted too much time. It’s not really important for the data entry because users must click an option from the dropdown which closes it. It’s more of a problem when you’re jumping from dropdown to dropdown without selecting anything, which does not really happen in normal use for my app.

By: Shrutika Narayana

Shrutika Narayana — Wed, 29 Mar 2017 19:44:00 +0000

Any luck on this one? I am facing the same problem.

By: Ed Gonzales

Ed Gonzales — Thu, 23 Mar 2017 20:09:00 +0000

Using models (key, value) in ui-select, ui-grid, i noticed that when the dropdown is clicked (expanded), the first item on the list is the one always highlighted rather than what was selected. Is there a way to bind what was selected to the item on the list and highlight it.

By: f_lun

f_lun — Wed, 15 Feb 2017 14:27:00 +0000

Hi Brian,
I am using multiple dropdowns in a ui-grid for a time tracking application. I have the dropdowns activate on a single click, however I have issues with making them close when other cells or dropdowns are clicked. The wrapper directive (which I have used from your samples) does not trigger properly/reliably when clicking other cells https://plnkr.co/edit/NPLMTT?p=preview

By: f_lun

f_lun — Wed, 15 Feb 2017 14:21:00 +0000

Thanks Yasin, the .length property works.

By: Yasin Okumus

Yasin Okumus — Wed, 15 Feb 2017 08:19:00 +0000

Thanks for this great post. I use jQuery 3 and I get .size() method error as it is deprecated by jQuery 1.8: https://api.jquery.com/size/ I made this .length and it is working now with jQuery 3. Can you modify your post as well?

By: Yasin Okumus

Yasin Okumus — Wed, 15 Feb 2017 08:18:00 +0000

size() method looks like deprecated. Now use length property instead of the method size(). Check the jQuery API: https://api.jquery.com/size/ @brianhann:disqus I made this .length and it is working now with jQuery 3

By: hari7priya

hari7priya — Wed, 18 Jan 2017 05:28:00 +0000

I have a column on UI-Grid with cells containing numeric data displayed in one among 3 background colors (css). I want to add a filter on the column header that would filter not the actual numeric content but the colors or css. Could you please help me out? How can I have a filter that doesn’t filter the content, but its css.

By: f_lun

f_lun — Thu, 12 Jan 2017 18:27:00 +0000

Hi Brian,
Thanks for the great post. I used many ideas from here on a complex grid I’m building.

I’m running into is issue where the drop-down doesn’t close properly after I navigate away from it. I’m getting this error in the console, happens in the docClick(evt) function in the uiSelectWrap directive.

Uncaught TypeError: $(…).closest(…).size is not a function
at HTMLDocument.docClick (app.js:761)
at defaultHandlerWrapper (angular.js:3398)
at HTMLDocument.eventHandler (angular.js:3386)

By: Prasanna

Prasanna — Tue, 22 Nov 2016 05:41:00 +0000

In your ui-select-choices use the refresh=”grid.appScope.refreshOptions()”

By: Prasanna

Prasanna — Tue, 22 Nov 2016 05:39:00 +0000

can you check the plnkr link

http://plnkr.co/edit/BVcnK6NJ3Lqy1b2LUobS?p=preview

what problem you got