button next to certain items, automatic data change

asked 2013-06-04 10:08:28 +0800

demizon
179 ● 1 ● 6

Hi there,

this is how my app look like http: //www.imghosting.cz/images/19picture.png I got 2 questions:

1. how can i show delete button only next to certain items? (in my case each item has attribute "aktiv" and i want to show it only next to items where "aktiv=true")

2. in the lower part i have "Edit kunde" where i cant edit attributes of selected item. It should work like this: 1. I select item from list 2. edit attributes 3. click "save" to submit changes. But the problem is that items are changed automatically (w/o clicking on submit button) also in case, when i click elsewhere with my mouse(when i lose focus on "edit data" part)

my zul file:

<window title="Kunde" width="1025px" height="970px" border="normal" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('tutorial.SearchViewModel')">
          <hbox align="center">
            <checkbox checked="@bind(vm.bindCheckBox)"  onCheck="@command('onCheckedAndUnchecked')" label="Show all items" />
          </hbox>
        <grid>
                <auxhead>
                    <auxheader colspan="4" class="topic">Add Kunde</auxheader>
                </auxhead>
                <columns>
                    <column label="Number" align="center" />
                    <column label="Name" align="center" />
                    <column label="Add" align="center" />
                </columns>
                  <rows>
                      <row>
                        <textbox value="@bind(vm.number)" width="95%" />
                        <textbox value="@bind(vm.name)" width="95%" />
                        <button label="Add"  onClick="@command('addKunde')" />
                      </row>
                  </rows>
        </grid>

        <listbox height="700px" 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="Delete" />
            </listhead>
            <template name="model">
                <listitem>
                    <listcell label="@load(each.id)"/>
                    <listcell label="@bind(each.number)"/>
                    <listcell label="@bind(each.name)"/>
                    <listcell><button label="Delete"  onClick="@command('removeKunde', kunde=each)" /> </listcell>
                </listitem>
            </template>
        </listbox>
       <grid>
            <auxhead>
                <auxheader colspan="5" class="topic">Edit Kunde</auxheader>
            </auxhead>
            <columns>
                <column align="center" label="ID"  />
                <column align="center" label="Number"  />
                <column align="center" label="Name"  />
                 <column align="center" label="Edit"  />
            </columns>
                <rows>
                  <row>
                    <label value="@load(vm.selectedKunde.id)" width="95%" />
                    <textbox value="@bind(vm.selectedKunde.number)" width="95%" />
                    <textbox value="@bind(vm.selectedKunde.name)" width="95%" />
                    <button label="Save" onClick="@command('editKunde',selectedData=vm.selectedKunde)"/>
                  </row>
                </rows>
       </grid>
    </window>

Thx for answers.