How to add a "Select one..." option in ZK combobox

Question

I'm using the ZK framework and I want to populate a combobox with the values of a given list , but I also want to include a "Select One..." option, as the combo is not required to have a value on submit.

My view looks like this:

<row>
    <hbox>
        Items:
    </hbox>
    <combobox width="100%" readonly="true" model="@load(vm.itemList)" selectedItem="@bind(vm.object.item)" >
        <template name="model">
            <comboitem label="@load(each.description)" />
        </template>
    </combobox> 
</row>

In the ViewModel I retrieve the list with a record set from the database and I don't want to add a record just for this and, if possible, I also want to avoid adding an empty Item on the list.

I think that should be possible to do something like this:

<combobox width="100%" readonly="true" model="@load(vm.itemList)" selectedItem="@bind(vm.object.item)" >
    <template name="model">
        <comboitem label="@load(each.description)" />
    </template>
    <comboitem label="Select One..."/>
</combobox> 

But neither that or this works:

<combobox width="100%" readonly="true" model="@load(vm.itemList)" selectedItem="@bind(vm.object.item)" >
    <template name="model">
        <comboitem label="@load(each.description)" />
        <comboitem label="Select One..."/>
    </template>
</combobox> 

Answer 1

You can modify the getItemList method of your view model so that it would add desired item to the list, something like the following:

public List getItemList() {
    List itemList = getItemsFromDatabase();
    YourItemClass item = new YourItemClass();
    item.setDescription("Select One...");
    itemList.add(item);
    return itemList;
}

EDIT: Another option is to use a placeholder with the text "Select One..." and an additional button (and/or hotkey) for clearing selected item in the combobox.