CODEWITHSUNDEEP
comboboxzk
Anto
Anto

Reputation: 4305

ZK Comboobox with a predefined set value

I want to create in ZK a simple combobox with 2 items: true and false. The combobox should have as a default set value the true item. Although it seems straightforward, I haven't managed to find a single online resource that explains such a simple component.

The code is displayed below:

<combobox id="validateVoucher" hflex="2">
    <comboitem id="true" label="True"/>
    <comboitem id="false" label="False"/>
</combobox>

Thanks in advance!

Upvotes: 0

Views: 6326

Answers (2)

Sean Connolly
Sean Connolly

Reputation: 5803

The following is tested:

<combobox id="validateVoucher" hflex="2" value="True">
    <comboitem label="True" value="true" />
    <comboitem label="False" value="false" />
</combobox>

There are a couple of things to note here. First and foremost is that true and false are not valid ids. If you're using ZKStudio it'll give you a warning

Syntax error on token "true", invalid VariableDeclaratorId

Everything still works as expected, unexpectedly, but warnings shouldn't be ignored.

If you're intention of setting the id was to store some useful 'data' to be retrieved later, the correct way to do this is to use the value field. This is the same as in HTML, read more on the HTML select tag for best practices.

Lastly, as Prabhat suggested, you can predefine the selected comboitem by specifying the value in the combobox. Note here, that the value field in the combobox does not map to the value field on the comboitem.

What you're actually doing here is setting the default displayed value of the combobox, which ZK will then map to a label on one of the comboitems. To better understand this, consider if you set the value of the combobox to 'gobbledigook'. The combobox will render with that text but when you expand the drop-down menu, neither 'True' nor 'False' will be preselected.

Extra 2 cents:

If you only want the user to be able to select 'True' or 'False', set readonly=true on the combobox

Upvotes: 4

Narayan Subedi
Narayan Subedi

Reputation: 1343

Use it like this :

<combobox id="validateVoucher" value="True" hflex="2">
    <comboitem id="true" label="True"/>
    <comboitem id="false" label="False"/>
</combobox>

Please do comment does it work ?

Upvotes: 0

Related Questions