Deselect listbox by clicking outside

answered 2013-03-07 18:31:48 +0800

mhj
806 ● 1 ● 7

updated 2013-03-07 18:32:21 +0800

hi brastilav! look at fiddle: link text select an item and click out i hope help you...

answered 2014-10-07 12:07:28 +0800

sjoshi
3493 ● 1 ● 8
http://zkframeworkhint.bl...

Have a look on this code

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
 <window title="new page title" border="normal" id="inp"
  viewModel="@id('vm') @init('com.notify.MyListbox')" apply="org.zkoss.bind.BindComposer"  >
  <button label="AddItem" onClick="@command('addNewItem')"  ></button>


  <listbox model="@bind(vm.dataList)" selectedItem="@bind(vm.selectedItem)" onBlur="@command('onBlurMethod')">
   <listhead>
    <listheader value="A"></listheader>
    <listheader value="B"></listheader>
    <listheader value="C"></listheader>

   </listhead>
   <template name="model" var="mymodel">
    <listitem>
     <listcell  >

      <textbox value="@bind(mymodel.a)" onChange="@command('changeTextBox',data = mymodel)"/>
     </listcell>
     <listcell>
      <textbox value="@bind(mymodel.b)"  onChange="@command('changeAnotherTextBox',data = mymodel)"/>

     </listcell>
     <listcell>
      <label value="@bind(mymodel.c)" />

     </listcell>
    </listitem>
   </template>
  </listbox>
 </window>
</zk>

MVVM view Model

package com.notify;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Component;

// TODO: Sjoshi
/**
 * The Class MyListbox.
 */
public class MyListbox {

    /** The data list. */
    private List<Data> dataList;

    /** The selected item. */
    private Data selectedItem;

    /**
     * After compose.
     *
     * @param view the view
     */
    @AfterCompose
    public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
        try {
            dataList = new ArrayList<Data>();
            Data data;
            data = new Data("a1", "b1", "c1");
            dataList.add(data);
            data = new Data("a2", "b2", "c2");
            dataList.add(data);
            data = new Data("a3", "b3", "c3");
            dataList.add(data);
        } catch (Exception e) {

        }
    }

    /**
     * Change text box.
     *
     * @param data the data
     * 
     * Taken from ZK Forum
     */
    @Command
    public void changeTextBox(@BindingParam("data") Data data) {
        data.setB("Hariom=>" + data.getA());
        BindUtils.postNotifyChange(null, null, data, "b");
    }

    @Command
    @NotifyChange("selectedItem")
    public void  onBlurMethod(){
        selectedItem = null;
    }
    /**
     * Change another text box.
     * Praposed By Nitin
     */
    @Command
    public void changeAnotherTextBox() {
        selectedItem.setC("Hariom=>" + selectedItem.getB());
        BindUtils.postNotifyChange(null, null, selectedItem, "c");
    }



    /**
     * Adds the new item.
     */
    @Command
    @NotifyChange("dataList")
    public void addNewItem() {
        Data data = new Data("", "", "");
        dataList.add(data);
    }

    /**
     * Gets the data list.
     *
     * @return the data list
     */
    public List<Data> getDataList() {
        return dataList;
    }

    /**
     * Sets the data list.
     *
     * @param dataList the new data list
     */
    public void setDataList(List<Data> dataList) {
        this.dataList = dataList;
    }

    /**
     * The Class Data.
     */
    public class Data {

        /** The a. */
        String a;

        /** The b. */
        String b;

        /** The c. */
        String c;

        /**
         * Gets the a.
         *
         * @return the a
         */
        public String getA() {
            return a;
        }

        /**
         * Gets the b.
         *
         * @return the b
         */
        public String getB() {
            return b;
        }

        /**
         * Gets the c.
         *
         * @return the c
         */
        public String getC() {
            return c;
        }

        /**
         * Sets the a.
         *
         * @param a the new a
         */
        public void setA(String a) {
            this.a = a;
        }

        /**
         * Sets the b.
         *
         * @param b the new b
         */
        public void setB(String b) {
            this.b = b;
        }

        /**
         * Sets the c.
         *
         * @param c the new c
         */
        public void setC(String c) {
            this.c = c;
        }

        /**
         * Instantiates a new data.
         *
         * @param a the a
         * @param b the b
         * @param c the c
         */
        public Data(String a, String b, String c) {
            super();
            this.a = a;
            this.b = b;
            this.c = c;
        }

    }

    /**
     * Gets the selected item.
     *
     * @return the selected item
     */
    public Data getSelectedItem() {
        return selectedItem;
    }

    /**
     * Sets the selected item.
     *
     * @param selectedItem the new selected item
     */
    public void setSelectedItem(Data selectedItem) {
        this.selectedItem = selectedItem;
    }

}