Build a select one choice displaying hierarchical selection data

The image below shows what we aim to do:

As you see, the list of products categorized by their suppliers. The  suppliers category is 

highlighted with a different background color and font-weight and is not selectable as a value.

The implementation of hierarchical lists is based on a hierarchical tree binding in the ADF binding layer. 

You can create the binding manually in the pageDef file, or simpler, drag and drop a ViewObject as a tree 

onto the page, configure the tree nodes and eventually remove the tree component from the page.

To build a selectOneChoice with a hierarchical display, you need to iterate over the tree nodes and access 

the child nodes:

<af:selectOneChoice id="selectBox" label="Choose product" valuePassThru="true"
                                styleClass="selectBox" unselectedLabel="Choose product">
                <af:forEach items="#{bindings.Suppliers1.children}" var="supplier">
                    <af:selectItem label="#{supplier.SupplierName}" disabled="true"/>
                    <af:forEach items="#{supplier.children}" var="product">
                        <af:selectItem label="#{product.ProductName}" value="#{product.ProductId}"/>
                    </af:forEach>
                </af:forEach>
            </af:selectOneChoice>

You can change the CSS style, you can consider using external CSS files or a skinning file inside which you configure your style class like the following:

.selectBox option{
    text-indent:15px;
}
.selectBox option[disabled]{
    color:black;
    background-color:#dddddd;
    font-weight: bold;
    text-indent:0px
}

If you are using external CSS file option, you can include it into your page by using af:resource tag like the example below:

<af:resource type="css" source="/resources/css/mySkin.css"/>

You can download this sample from the link below: (it uses the FOD demo schema which you can find it here)
hierarchicalSelectionData.rar (72ko)