-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi there, i am trying to get same effect like here http://www.zkoss.org/zkdemo/gettingstarted/dialogpopup (you click on item and app will throw popup with item details). problem is i am working with listbox. I tried something like this:
<template name="model">
<listitem popup="detail_${each.id}, position=end_before" style="cursor:pointer">
<div>
<label value="${each.kunde.name}" />
<popup id="detail_${each.kunde.id}">
<include src="/kunde_detail.zul"
orderItem="${each}" />
</popup>
</div>
but i am getting error: Unsupported child for listitem:
Can any1 help me plz? Thx in advance.
demizon,
you are using "each" attribute in
trying using
popup="detail_${each.id}, position=end_before"
in your listItem component.
and :
<vlayout children="@load(vm.list)">
<template name="children">
<label value="@load(each.name)"/>
</template>
</vlayout>
<vlayout children="@load(vm.list)">
<template name="children" >
<popup id="detail_${each.id}">
<include src="/edit/kunde_detail.zul" kunde="${each}" />
</popup>
</template>
</vlayout>
The div,label and popup component are not supported by listItem component.
<listitem popup="detail_${each.id}, position=end_before" style="cursor:pointer">
</listitem>
</listbox>
you have to create this popup separately outside of listbox component .
thx, i tried it, but i have problem still... when i click on item, just nothings happen. i did it like this:
<listbox>
<listitem popup="detail_${each.id}, position=end_before" style="cursor:pointer">
...
</listitem>
</listbox>
<div>
<label value="${each.name}" />
<popup id="detail_${each.id}">
<include src="/edit/kunde_detail.zul" kunde="${each}" />
</popup>
</div>
kunde_detail.zul:
<vlayout width="300px">
<label value="${kunde.id}" style="font-size: 14px; font-weight: bold;" />
<grid>
<rows>
<row>
Name:
<label value="${kunde.name}" />
</row>
<row>
Number:
<label value="${kunde.number}" />
</row>
</rows>
</grid>
</vlayout>
any ideas why its not working?
hi.
I don't know if I'm wrong, what you want to do is when you click in a ListItem of your ListBox a popup appears. If that's you problem why don't you use the onSelect attribute of the ListBox? Then when you select a item you show the popup. You can do something like this: <listbox mold="select" onselect="alert("Item Selected")"> <listitem/> .... </listbox>
ye thats exactly what i want... i tried your soultion but i get error: Element type "listbox" must be followed by either attribute specifications, ">" or "/>".
this is how i edited relevant part of zul file:
<listbox height="590px" mold="select" onselect="alert("Item Selected")" model="@load(vm.kundeList)" selectedItem="@bind(vm.selectedKunde)" emptyMessage="No kunden" >
<auxhead>
<auxheader colspan="4" class="topic">Kunden List</auxheader>
</auxhead>
<listhead>
<listheader width="95%" align="center" label="ID" />
<listheader width="95%" align="center" label="Name" />
<listheader width="95%" align="center" label="Activate/Deactivate" />
</listhead>
<template name="model">
<listitem popup="detail_${each.id}, position=end_before" style="cursor:pointer">
<listcell label="@load(each.id)"/>
<listcell label="@bind(each.number)"/>
<listcell label="@bind(each.name)"/>
<listcell>
<button label="Deactivate" if="${each.aktiv}" disabled="${not each.aktiv}" onClick="@command('deactivateKunde', kunde=each)" />
<button label="Activate" if="${not each.aktiv}" disabled="${each.aktiv}" onClick="@command('activateKunde', kunde=each)" />
</listcell>
</listitem>
</template>
</listbox>
First correct the following errors that i found in you code:
1. The attribute must be right spelled: it must be onSelect
and not onselect
.
2. When you put a alert in order to be a action when a event is triged directly on the attribute and the parameter of the alert is a String e.g.: alert("some text")
it must be surrounded by '' and not by "". So in order to you code stop showing you errors change it to onSelect = 'alert("Item Selected")'
thx man...i m currently out of office, so i ll try tomorrow...but as i m thinking about it, you probably misunterstood me...i have listbox with listitems(in the listbox, listitem show only certain attributes), what i want is to show all attributes of listitem in popup...like here:
demizon ( 2013-06-18 17:22:04 +0800 )editOk i saw the complete example and now i understand. sorry
eudsonbambo ( 2013-06-19 09:19:58 +0800 )editguys i tried to test that popup with grid it worked well, so the only question remains how to add popup to listbox... in this case it worked well:
<grid model="@load(vm.kundeList)" >
<columns>
<column label="id" align="center" />
<column label="name" align="center" />
<column label="number" align="center" />
</columns>
<template name="model">
<row popup="detail_${each.id}, position=end_before" style="cursor:pointer">
<div>
<label value="${each.name}" />
<popup id="detail_${each.id}">
<include src="/edit/kunde_detail.zul" kunde="${each}" />
</popup>
</div>
<label value="@load(each.id)" />
<label value="@load(each.name)" />
<label value="@load(each.number)" />
</row>
</template>
</grid>
in this case it doesnt work:
<listbox height="590px" model="@load(vm.kundeList)" selectedItem="@bind(vm.selectedKunde)" emptyMessage="No kunden" >
<auxhead>
<auxheader colspan="4" class="topic">Kunden List</auxheader>
</auxhead>
<listhead>
<listheader width="95%" align="center" label="ID" />
<listheader width="95%" align="center" label="Number" />
<listheader width="95%" align="center" label="Name" />
</listhead>
<template name="model">
<listitem popup="detail_${each.id}, position=end_before" style="cursor:pointer">
<listcell label="@load(each.id)"/>
<listcell label="@bind(each.number)"/>
<listcell label="@bind(each.name)"/>
</listitem>
</template>
</listbox>
<div>
<label value="${each.name}" />
<popup id="detail_${each.id}">
<include src="/edit/kunde_detail.zul" kunde="${each}" />
</popup>
</div>
i tried itbut now i get following error: Property 'aktiv' not found on type java.lang.String Property 'id' not found on type java.lang.String
my updated code:
<listbox height="590px" model="@load(vm.kundeList)" selectedItem="@bind(vm.selectedKunde)" emptyMessage="No kunden" >
<auxhead>
<auxheader colspan="4" class="topic">Kunden List</auxheader>
</auxhead>
<listhead>
<listheader width="95%" align="center" label="ID" />
<listheader width="95%" align="center" label="Number" />
<listheader width="95%" align="center" label="Name" />
<listheader width="95%" align="center" label="Activate/Deactivate" />
</listhead>
<template name="model">
<listitem forEach="each @template('popupTemplate')">
<listcell label="@load(each.id)"/>
<listcell label="@bind(each.number)"/>
<listcell label="@bind(each.name)"/>
<listcell>
<button label="Deactivate" if="${each.aktiv}" disabled="${not each.aktiv}" onClick="@command('deactivateKunde', kunde=each)" />
<button label="Activate" if="${not each.aktiv}" disabled="${each.aktiv}" onClick="@command('activateKunde', kunde=each)" />
</listcell>
</listitem>
</template>
</listbox>
<template name="popupTemplate" var="each">
<label value="${each.name}" />
<popup id="detail_${each.id}">
<include src="/edit/kunde_detail.zul" kunde="${each}" />
</popup>
</template>
What is this aktiv
as i can see, this is from yours and not from zkFramework. The object that are trying to list have this variable(aktiv)?
aktiv is bool attribute, it indicates whether item in my listbox is active/inactive, and according to this, I have "activate" or "deactivate" button next to each item in my listbox
Asked: 2013-06-18 07:53:17 +0800
Seen: 123 times
Last updated: Jun 19 '13