Hide/Show components based on listbox selection, using MVVM

asked 2021-04-23 21:25:30 +0800

gscreddy gravatar image gscreddy

Based on the value we select in the listbox, few textboxes needs to be shown and few textboxes needs to be hidden. How can we handle this using MVVM Approach?

delete flag offensive retag edit

1 Reply

Sort by ยป oldest newest

answered 2021-04-26 14:48:34 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

Demonstrate the idea with a simple example:

<div viewModel="@id('vm')@init('org.zkoss.mvvm.viewmodel.HideVM')">
    <listbox model="@init(vm.model)" onSelect="@command('update')"/>
    <textbox placeholder="group1" visible="@load(vm.group1Visible)"/>
    <textbox placeholder="group2" visible="@load(vm.group2Visible)"/>

public class HideVM {
    private ListModelList<String> model = new ListModelList<>();
    private boolean group1Visible;
    private boolean group2Visible;

    public HideVM(){

    @Command @NotifyChange({"group1Visible", "group2Visible"})
    public void update(){
        String selectedItem = model.getSelection().iterator().next();

        //determine the rule to update visibility
        if (selectedItem.contains("group1")){
            group1Visible = true;
            group2Visible = false;
        }else {
            group1Visible = false;
            group2Visible = true;
    //omit setter
link publish delete flag offensive edit
Your reply
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: 2021-04-23 21:25:30 +0800

Seen: 7 times

Last updated: Apr 26

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