How to add an empty value to a combobox?

asked 2015-06-07 23:26:01 +0800

WilliamB gravatar image WilliamB
1609 1 6

Is there any clean way to add an empty (null) value to a combobox on top of the ListModel defined as Model?

I'm using MVVM, and the ListModel is actualy an Enum . values().

If the user pick a choice, he cannot go back to blank at the moment ...

Thanks for your help

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2015-06-22 08:31:21 +0800

WilliamB gravatar image WilliamB
1609 1 6

Hello Darksu thanks for your reply. I had the enum display part working fine.

My issue was about how to add an empty item in my combobox without affecting the model, as I did not want to create an "Empty" value in my enum.

I got it working by overriding the combobox component

public class ComboWithEmptyValue extends Combobox {

    private static final long serialVersionUID = 1L;

    private boolean withEmptyOption = false;

    public void setWithEmptyOption(final boolean pWithEmptyOption) {
        withEmptyOption = pWithEmptyOption;

    @SuppressWarnings({ "rawtypes", "unchecked" })
    public void setModel(final ListModel<?> pModel) {

        // If one wants to add an empty value
        if (withEmptyOption) {
            // we recreate the list
            ListModelList list = new ListModelList(pModel.getSize() + 1);
            // And add an empty value at the start of the list
            list.add(0, null);
            // Then the original list value
            list.addAll((Collection) pModel);
        } else {
            // Otherwise we do nothing special

And to override the original combobox, i added to lang-addon.xml :


Exemple with the following enum as model :

public enum TypeEntityEnum {


    private TypeEntityEnum(final String pLabelKey) {
        labelKey = pLabelKey;

    private String labelKey ;

And in the zul, after i populate the vm.listTypeEntity ViewModel variable with TypeEntityEnum.values()

<combobox model="@init(vm.listTypeEntity)" readonly="true" withEmptyOption="true" 
    <template name="model" var="typeEntity">
        <comboitem label="${c:l(typeEntity.label)}"/>

There is currently a little issue with the way ZK displays an empty value in the combobox : http://tracker.zkoss.org/browse/ZK-2783?filter=14300 The CSS to fix it can be found in the jira.

Hope this will help someone.


link publish delete flag offensive edit

answered 2015-06-21 23:36:31 +0800

Darksu gravatar image Darksu
1991 1 4

Hello WilliamB,

You can use the following fiddle:


At the example you can go again to blank by pressing the backspace button.

Best Regards,


link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2015-06-07 23:26:01 +0800

Seen: 79 times

Last updated: Jun 22 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More