Details

    • Similar issues:
      KULRICE-8054Provide ability to specify a dropdown hierarchy
      KULRICE-9166New Navigation enhanced controls
      KULRICE-10119Update Multi Value Lookups Selection Control
      KULRICE-10038Mock for Multi Value Lookups Controls
      KULRICE-11697Enhance dropdown menu component to allow for button dropdowns
      KULRICE-12408Rich Multi-Select/Filter control
      KULRICE-13717Fill AFT per-screen item gap: KRAD Library: Dropdown with Table
      KULRICE-10008Dropdowns don't expand for text
      KULRICE-10292Dropdowns not adjusting width to contents
      KULRICE-8392Rework namespace dropdown
    • Epic Link:
    • 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).

        Issue Links

          Activity

          Hide
          Brian Smith (Inactive) added a comment -

          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

          Show
          Brian Smith (Inactive) added a comment - 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
          Hide
          Brian Smith (Inactive) added a comment - - edited

          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

          Show
          Brian Smith (Inactive) added a comment - - edited 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
          Hide
          Brian Smith (Inactive) added a comment -

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

          Show
          Brian Smith (Inactive) added a comment - Current recommendation is to use Bootstrap select plugin but use the jquery ui dropdown as a guide to modify it to meet accessibility standards
          Hide
          Jerry Neal (Inactive) added a comment -

          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?

          Show
          Jerry Neal (Inactive) added a comment - 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?
          Hide
          Brian Smith (Inactive) added a comment -

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

          Show
          Brian Smith (Inactive) added a comment - Verified that its supported the same way in the multi-select scenario so we should support both
          Hide
          Jeff Heckel (Inactive) added a comment -

          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>

          Show
          Jeff Heckel (Inactive) added a comment - 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>
          Hide
          Jerry Neal (Inactive) added a comment -

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

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

          Show
          Jerry Neal (Inactive) added a comment - Another Bootstrap plugin that looks a little better (in case we come back to this): http://davidstutz.github.io/bootstrap-multiselect/

            People

            • Assignee:
              Jeff Heckel (Inactive)
              Reporter:
              William Washington (Inactive)
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 1 week
                1w
                Remaining:
                Time Spent - 1 day Remaining Estimate - 4 days
                4d
                Logged:
                Time Spent - 1 day Remaining Estimate - 4 days
                1d

                  Agile

                    Structure Helper Panel