I want to display a tree like structure in my dropdown in JSF. Basically the select items are in a hierarchy and I would like that to be evident in the dropdown.
Is it possible ?
3 Answers
So, you basically want a HTML <optgroup>? Use SelectItemGroup.
JSF bean (I assume JSF 1.x):
private String option; // +getter +setter private List<SelectItem> options; // +getter public Bean() { options = new ArrayList<SelectItem>(); SelectItemGroup group1 = new SelectItemGroup("Group 1"); group1.setSelectItems(new SelectItem[] { new SelectItem("Group 1 Value 1", "Group 1 Label 1"), new SelectItem("Group 1 Value 2", "Group 1 Label 2"), new SelectItem("Group 1 Value 3", "Group 1 Label 3") }); options.add(group1); SelectItemGroup group2 = new SelectItemGroup("Group 2"); group2.setSelectItems(new SelectItem[] { new SelectItem("Group 2 Value 1", "Group 2 Label 1"), new SelectItem("Group 2 Value 2", "Group 2 Label 2"), new SelectItem("Group 2 Value 3", "Group 2 Label 3") }); options.add(group2); } JSF view:
<h:selectOneMenu value="#{bean.option}"> <f:selectItems value="#{bean.options}" /> </h:selectOneMenu> Generated HTML example:
<select name="j_idt6:j_idt7" size="1"> <optgroup label="Group 1"> <option value="Group 1 Value 1">Group 1 Label 1</option> <option value="Group 1 Value 2">Group 1 Label 2</option> <option value="Group 1 Value 3">Group 1 Label 3</option> </optgroup> <optgroup label="Group 2"> <option value="Group 2 Value 1">Group 2 Label 1</option> <option value="Group 2 Value 2">Group 2 Label 2</option> <option value="Group 2 Value 3">Group 2 Label 3</option> </optgroup> </select> How it look like in browser:
1 Comment
Otávio Garcia
For people who uses Omnifaces
SelectItemsConverter to expose an Object instead of a String, works perfect too.I am not sure I understand what you're asking. Assuming you want the sub-categories in the menu to be slightly indented? If that's the case, how about sending from the server-side/handler the array of items already parsed with an " "(space) or with a"-".
In other words, you can't use javascript to parse and understand category hierarchy. You have 2 options - either run the recursion via JSF (sounds complicated, and ugly for the UI person who needs to design the page), or do the sorting on the server side, providing the JSF with aleardy indented entries.
Hope this helps,
Yishai
1 Comment
Anand Sunderraman
yes you got me right, my options are grouped into categories and each of the categories has some options under them as well.
But nested groups are not visualized correctly. They appear as item not as group.
h:selectOneMenu, not combobox (which is an editable dropdown).