0

Multiple choice combobox

asked 2016-12-20 16:40:35 +0800

WilliamB gravatar image WilliamB
1609 1 6

updated 2016-12-21 08:42:13 +0800

Wondering if there is an almost out of the box component offering a combobox with checkbox to select multiple values, and which would display selected value in a label separated by comma ?

I'm using MVC

Bandbox with an inner listbox is a good candidate, but I would want the input part to not allow the user to type anything and instead display there the selected value. While opening the bandbox when the user click on it.

Would that be possible ?

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2016-12-21 08:58:21 +0800

WilliamB gravatar image WilliamB
1609 1 6

In case it helps someone else, went with a readonly bandbox containing a listbox to do what I wanted.

On the zul side :

<bandbox id="myBandBox" width="135px" readonly="true">
    <bandpopup>
        <listbox id="myListBox" width="135px" height="60px" multiple="true" 
            checkmark="true" />
    </bandpopup>
</bandbox>

On the controler (MVC) side :

Retrieve the zul components

@Wire
private Bandbox myBandBox;
@Wire
private Listbox myListBox;

During initialization : 1 - add an event listener to open the bandbox even in readonly mode

myBandBox.addEventListener(Events.ON_CLICK, new EventListener<Event>() {
    @Override
    public void onEvent(Event arg0) throws Exception {
        myBandBox.setOpen(true);
    }
});

2 - fill the listbox with its listItems

3 - Add an event listener when checking the listITem

changeStatusListbox.addEventListener(Events.ON_SELECT, new EventListener<SelectEvent<Listitem, String>>() {
    @Override
    public void onEvent(SelectEvent<Listitem, String> event) throws Exception {
        // Generates the label you want to display
        StringBuilder labelToDisplaySB = new StringBuilde();
        // Business logic checking that if all is selected, you will only display "ALL" else you will display the listItem labels separated with a comma or whatever ...

        // Then set it as Value for the bandbox
        statusBandBox.setValue(labelToDisplaySB.toString());
        statusBandBox.setTooltiptext(statusBandBox.getValue());
    }
});
link publish delete flag offensive edit
0

answered 2016-12-21 11:57:24 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9
https://github.com/chillw...

maybe a chosenbox could help.

<style>
    i.readOnly > input {
    display: none;
    }
</style>
<chosenbox sclass="readOnly">

Greetz chill.

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

Follow
1 follower

RSS

Stats

Asked: 2016-12-20 16:40:35 +0800

Seen: 48 times

Last updated: Dec 21 '16

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