[KULRICE-8891] Hierarchy for dropdown control Created: 01/Feb/13  Updated: 24/Sep/14  Resolved: 24/Mar/14

Status: Closed
Project: Kuali Rice Development
Component/s: Development, KNS Equivalency, Roadmap, User Experience (UX)
Affects Version/s: 2.2
Fix Version/s: 2.5
Security Level: Public (Public: Anyone can view)

Type: Task Priority: Major
Reporter: William Washington (Inactive) Assignee: Jeff Heckel (Inactive)
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 4 days
Time Spent: 1 day
Original Estimate: 1 week

Issue Links:
Cloners
cloned to KULRICE-12408 Rich Multi-Select/Filter control Closed
Relate
relates to KRRM-141 KRAD Phase 3 - Complete core features... Resolved
Epic Link: Components
Rice Module:
KRAD
KRAD Feature Area:
UIF Component
Application Requirement:
KS
Sprint: 2.5.0-m1 Sprint 2, 2.5.0-m1 Sprint 3
KAI Review Status: Not Required
KTI Review Status: Not Required

 Description   

KNS functional equivalence item. Ability to display hierarchy or grouping within dropdown (select).



 Comments   
Comment by Brian Smith (Inactive) [ 03/Mar/14 ]

Tags already built into html optgroup give us a way to separate by category already... doing anything beyond this adds accessibility issues we have to be careful with, however:

Bootstrap has the dropdown menu we are using, could be manipulated to be a control with some effort (accessibility issues also)

Someone has made a plugin that works within bootstrap that does what we want essentially (looks nice, we would have to make it accessible somehow)
http://silviomoreto.github.io/bootstrap-select/

Accessibility read:
http://www.456bereastreet.com/archive/201111/an_accessible_keyboard_friendly_custom_select_menu/

It looks like we either need to use standard tags or apply aria roles manually to achieve accessiblity using listbox and option roles among others, with aria-selected attribute see:
http://oaa-accessibility.org/examples/role/82/

See for a good custom dropdown implementation (not what we want to use but what we need achieve):
http://dojotoolkit.org/reference-guide/1.9/dijit/form/Select.html#dijit-form-select

Comment by Brian Smith (Inactive) [ 03/Mar/14 ]

All things considered this is the one we should go with for maximum support (if customizing the dropdown style is needed):
http://wiki.jqueryui.com/w/page/12138056/Selectmenu

Comment by Brian Smith (Inactive) [ 04/Mar/14 ]

Current recommendation is to use Bootstrap select plugin but use the jquery ui dropdown as a guide to modify it to meet accessibility standards

Comment by Jerry Neal (Inactive) [ 12/Mar/14 ]

Decision from UXI group was to just implement the html optgroup option from dropdowns. Note optgroup has a disabled option as well we should support. Not sure about multi-select support?

Comment by Brian Smith (Inactive) [ 12/Mar/14 ]

Verified that its supported the same way in the multi-select scenario so we should support both

Comment by Jeff Heckel (Inactive) [ 18/Mar/14 ]

Added support of HTML optgroup. Sample config:

<bean parent="Uif-DropdownControl" p:multiple="true">
<property name="options">
<list>
<bean parent="Uif-OptionGroupLabel" p:label="American"/>
<bean parent="Uif-KeyLabelPair" p:key="a1" p:value="Ford"/>
<bean parent="Uif-KeyLabelPair" p:key="a2" p:value="Chevy"/>
<bean parent="Uif-KeyLabelPair" p:key="a3" p:value="Buick"/>
<bean parent="Uif-OptionGroupLabel" p:label="Japan"/>
<bean parent="Uif-KeyLabelPair" p:key="j1" p:value="Toyota"/>
<bean parent="Uif-KeyLabelPair" p:key="j2" p:value="Honda"/>
</list>
</property>
</bean>

Comment by Jerry Neal (Inactive) [ 03/Apr/14 ]

Another Bootstrap plugin that looks a little better (in case we come back to this):

http://davidstutz.github.io/bootstrap-multiselect/

Generated at Sat Nov 28 02:00:49 CST 2020 using JIRA 7.0.11#70121-sha1:19d24976997c1d95f06f3e327e087be0b71f28d4.