2

Show and hide tables on the basis of size of list box.

asked 2013-04-26 13:43:45 +0800

iamsudhir4u gravatar image iamsudhir4u flag of India
545 7
http://corejavasupport.bl...

updated 2013-04-26 13:46:26 +0800

On my zul there are three components (list box , table and table).

 <zk xmlns:x="xhtml" xmlns:zk="zk">
    <window 
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('ListBoxTestViewModel')">

        <menubar>
            <menuitem label="Add" onClick="@command('addCode')" />
        </menubar>

        <listbox model="@bind(vm.folderSentenceListModel)"
            selectedItems="@bind(vm.selectedFolderSentenceItems)">
            <listhead>
                <listheader label="Code" />
                <listheader label="Details" />
            </listhead>

            <template name="model">
                <listitem>
                    <listcell>
                        <label value="@bind(each.code)" />
                    </listcell>
                    <listcell>
                        <label value="@bind(each.details)" />
                    </listcell>

                </listitem>
            </template>
        </listbox>
        <x:table>
            <x:tr>
                <x:td>
                    <textbox value="@bind(vm.code)" width="150px" />
                </x:td>

            </x:tr>
        </x:table>
        <x:table />
        <x:tr>
            <x:td>
                <textbox value="@bind(vm.details)" width="150px" />
            </x:td>
        </x:tr>
        </x:table>
    </window>
</zk>

I want these two tables only visible if

  • There is some record in list box.
  • Suppose there is no any record is present in list box and user is clicking on Add button then we are adding a row in list box.

Please suggest the best way to show and hide these table.

Thanks in Advance.

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
1

answered 2013-04-30 10:30:38 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

updated 2013-04-30 10:31:58 +0800

to control the visibility dynamically you can surround the <x:table> elements by a <div> with "visible" attribute

<div visible="@load(!empty vm.folderSentenceListModel)">
   <x:table>
...
   </x:table>
</div>

and then add the @NotifyChange annotation to your @Command-method in your ViewModel

@Command("addCode") 
@NotifyChange("folderSentenceListModel")
public void addItem() {
...
}
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: 2013-04-26 13:43:45 +0800

Seen: 55 times

Last updated: Apr 30 '13

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