0

Deselect listbox by clicking outside

asked 2013-03-07 16:43:45 +0800

bratislav1983 gravatar image bratislav1983
54 1

How can I deselect a listbox by clicking on empty space on the page? How to get zk component under the cursor and how to set a handler?

delete flag offensive retag edit

Comments

i have this problem too, please say the suggestion

fiendnet ( 2014-10-02 14:18:38 +0800 )edit

3 Answers

Sort by ยป oldest newest most voted
0

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

mhj gravatar image mhj flag of Brazil
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...

link publish delete flag offensive edit
0

answered 2013-03-08 11:27:12 +0800

bratislav1983 gravatar image bratislav1983
54 1

Hi mhj, thanx for the answer!

I'm still not sure how to do this, because onBlur event fires even when I change selection in the listbox. Try the following :

  • open zk fiddle example and select an item...all fine
  • now click on other item...message will be shown, but the selection stays the same

onBlur event should fire only when component looses focus right? In your example, onBlur fires even when I change selected items.

Basically, I want to do smth like this :

@Listen("onBlur=#clientsLb")
public void onBlurClientsLb(Event e) {
    logger.debug("onBlur");
    Listbox lb = (Listbox) e.getTarget();
    lb.setSelectedItem(null);
}

This will not work properly, I don't know why.

link publish delete flag offensive edit
0

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

sjoshi gravatar image sjoshi flag of India
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;
    }

}
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
3 followers

RSS

Stats

Asked: 2013-03-07 16:43:45 +0800

Seen: 60 times

Last updated: Oct 07 '14

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