Dropdown with dividers

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Dropdown with dividers

bigal.nz
Hello,

I am using thymeleaf with springboot.

I want to generate a dropdown with dividers with headings, so for example:

CAKES
-----------------
    Banana
    Chococlate
    Strawberry

BISCUITS
-----------------
    Gingernut
    Macaroon
    Chocolate Chip

etc

I can currently use th:each to get a list of foods into the dropdown - the question is how to get them into the dropdown sorted by type with type heading on the divider?

Cheers

-AL
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Dropdown with dividers

Emanuel
Administrator
One of the easier ways to deal with grouping things is to do that in the controller before passing it along to your templates.  That way, the templating becomes a much easier thing to tackle because the data is already how you want it.

eg: if you had a map of lists, the key being the group name and the list being the items in that group, you can use double th:each's on that data.  Once you have that HTML structure, you can apply CSS classes in the places where dividers will go

// pseudocode/Groovy ;)
foodGroups = [
  'CAKES': ['Banana', 'Chocolate', 'Strawberry'],
  'BISCUITS': ['Gingernut', 'Macaroon', 'Chocolate Chip']
]

<ul>
  <li th:each="foodGroup: ${foodGroups}" class="group">
    <div th:text="${foodGroup.key}" class="group-header">Group header</div>
    <ul>
      <li th:each="foodItem: ${foodGroup.value}" th:text="${foodItem}">Food item</div>
    </ul>
  </li>
</ul>

So here you can see these "group" and "group-header" classes where you can apply styling to create dividers.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Dropdown with dividers

bigal.nz
So it looks like your passing in groups within a list?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Dropdown with dividers

Emanuel
Administrator
That data structure is a Map of Lists - the keys are the group names, and the values are lists of items that fall within that group.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Dropdown with dividers

bigal.nz
Thanks for your help Emanuel.

For reference the html looks like this:

                        <label for="food" class="control-label">Food Selector</label>
                        <div class="">
                            <select size="3" name="food" class="selectpicker show-tick" data-live-search="true" id="food" data-width="100%" title="Choose">
                                <optgroup th:each="pairTypeFood : ${food}"
                                          th:label="${pairTypeFood.key}">
                                    <option th:each="food : ${pairTypeFood.value}"
                                            th:value="${food.flavour}"
                                            th:selected="${food.Id}"
                                            th:text="${food.name}">
                                    </option>
                                </optgroup>
                            </select>
                        </div>

<optgroup th:each="pairTypeFood : ${food}" - holds CAKE, BISCUIT etc
<option th:each="food :${pairTypeFood.value} - holds the falvour

The input was a LinkedList Hashmap.

HTH anyone else in future.

Al
Loading...