Multiple of same composite component on one zul

asked 2018-05-17 08:18:12 +0800

mfarmer gravatar image mfarmer
13 2

I am having an issue with a composite component.

I have a Chosenbox component with a button attached to allow selection of all items in the model, or to clear the selection. I have this component twice on a zul page. The issue that I am having is as follows:

  1. When I select a single object, the correct Chosenbox's selectedObjects is bound. This behaviour is expected and working properly. (In my posted code Implementation.zul, object from chsnA is selected and appears as selected in chsnA, and the same for chsnB)
  2. When I go to click the button of my custom component, and post a command to 'Add All'
    objects to the selection, only one Chosenbox ever gets populated. (In my posted code Implementation.zul, I click the button that is attached to chsnA, and click 'Add All'. and only chsnB will ever become populated with objects. So no matter which 'Add All' I choose, chsnB is always populated.


<box style="border:0px;" apply="org.zkoss.bind.BindComposer" hflex="1" viewModel="@id('vm') @init('pathTo.vmName')" >
<div class="no-padding-left form-group" hflex="1">
    <label visible="@load(vm.showLabel)" style="font-size:14px; font-family: Open Sans" value="Some Value" />
    <div class="input-group" width="95%">           
            sclass="custom-chosenbox form-control"
            model="@load(vm.model) @template(each.active ? 'active' : 'inactive')"
            <!-- template -->
        <menupopup id="mpopupcb">
            <menuitem label="Add All" onClick="@command('selectAll')" />
            <menuitem label="Clear"   onClick="@command('clearAll')" />
        <button class="btn btn-sm btn-white dropdown-toggle" popup="mpopupcb, after_start" />



public class vmName extends SomeClass { 
private Chosenbox chosenBox;    
private List<Object> selection = new ArrayList<>();

public void init() {
    if(this.args.containsKey(ParamsEnum.SELECTED_OBJECT.getValue())) {
        selectedStores = (List<Object>) args.get("selectedObjects");
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
public void selectAll() {
    ListModelList<Object> listModel = (ListModelList<Object>) chosenBox.getModel();
    for(Object lm : listModel) {
    Events.postEvent("onSelect", chosenBox, null);
public ListModelList<Object> getModel() {
    //Code to populate and return the model
public List<Object> getSelection() {
    return selectedStores;
public void setSelection(List<Object> selection) {
    this.selection = selection


public class Composite extends Div implements IdSpace, AfterCompose {   
private Chosenbox chosenBox;    
private List<Object> selection = new ArrayList<Company>();

public void onCreate() {        
    Map<String, Object> map = new HashMap<String, Object>();
    map.put(vmName.ParamsEnum.SHOW_LABEL.getValue(), showLabel);
    map.put(vmName.ParamsEnum.SELECTED_OBJECT.getValue(), selection);

    Executions.createComponents(ZUL_PATH, this, map);

    Selectors.wireVariables(this, this, Selectors.newVariableResolvers(getClass(), Div.class));
    Selectors.wireComponents(this, this, false);
    Selectors.wireEventListeners(this, this);
@Listen("onSelect = #chosenBox")
public void onSelect() {
    setSelection(new ArrayList<>(chosenBox.getSelectedObjects()));
    Events.postEvent("onSelectObject", this, selection);
public List<Object> getSelection() {
    return selection;
public void setSelection(List<Company> selection) {
    this.selection = selection;


<div >
    <label value="valueA"/>
    <chosen-store id="chsnA" selection="@bind(object in VM)" />

<div >
    <label value="valueB"/>
    <chosen-store id="chsnB" selection="@bind(object in VM)" />

I've tried to include only that which affects the chosenbox and its selection as it pertains to my code.

I've noticed that when making a single selection, if I put somewhere 'chosen.toString()', the correct Id is displayed (<chosenbox u7gmbb#cbstores=""> for example )

Whereas when clicking 'Add All', the id for only chsnB is displayed, and I cannot figure out why the wrong id is being used.

Any help is greatly appreciated. I apologize in advanced if this post is long and convoluted.

delete flag offensive retag edit
Be the first one to answer this question!
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




Asked: 2018-05-17 08:18:12 +0800

Seen: 3 times

Last updated: May 17