1

popup window for listitem

asked 2013-06-18 07:53:17 +0800

demizon gravatar image demizon
169 1 6

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.

delete flag offensive retag edit

11 Answers

Sort by ยป oldest newest most voted
3

answered 2013-06-19 07:36:07 +0800

nsharma gravatar image nsharma flag of India
917 1 11

updated 2013-06-19 11:52:46 +0800

demizon,

you are using "each" attribute in

component,"each" is used where there is some loop(template,foreach etc.)". It is not able to read your "each" outside your listbox,you have apply a loop for your
code to run.

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>
link publish delete flag offensive edit
1

answered 2013-06-18 11:45:37 +0800

nsharma gravatar image nsharma flag of India
917 1 11

updated 2013-06-18 11:47:50 +0800

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 .

link publish delete flag offensive edit

Comments

i tried it but it doesnt work...when i clicked on item nothings happened

demizon ( 2013-06-19 07:32:51 +0800 )edit
1

answered 2013-06-18 13:19:02 +0800

demizon gravatar image demizon
169 1 6

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?

link publish delete flag offensive edit
1

answered 2013-06-18 13:38:21 +0800

eudsonbambo gravatar image eudsonbambo flag of Mozambique
30 2
http://eudsonbambo.blogsp...

updated 2013-06-18 13:45:56 +0800

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>

link publish delete flag offensive edit
1

answered 2013-06-18 14:04:40 +0800

demizon gravatar image demizon
169 1 6

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>
link publish delete flag offensive edit
1

answered 2013-06-18 17:14:10 +0800

eudsonbambo gravatar image eudsonbambo flag of Mozambique
30 2
http://eudsonbambo.blogsp...

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")'

link publish delete flag offensive edit

Comments

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 )edit

Ok i saw the complete example and now i understand. sorry

eudsonbambo ( 2013-06-19 09:19:58 +0800 )edit
1

answered 2013-06-19 07:47:45 +0800

demizon gravatar image demizon
169 1 6

guys 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>
link publish delete flag offensive edit
1

answered 2013-06-19 08:01:35 +0800

demizon gravatar image demizon
169 1 6

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>
link publish delete flag offensive edit
1

answered 2013-06-19 09:23:25 +0800

eudsonbambo gravatar image eudsonbambo flag of Mozambique
30 2
http://eudsonbambo.blogsp...

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)?

link publish delete flag offensive edit
1

answered 2013-06-19 09:27:45 +0800

demizon gravatar image demizon
169 1 6

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

link publish delete flag offensive edit

Comments

updated my answer,i saw the problem later on with foreach, this will work for you now. about your property not found issue,the name don,t exists in your pojo elements,see and correct your spelling most probably.

nsharma ( 2013-06-19 11:53:19 +0800 )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-06-18 07:53:17 +0800

Seen: 123 times

Last updated: Jun 19 '13

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