# listbox onclick and ondoubleclick

asked 2011-03-08 02:18:34 +0800

zorosp
69 1

hello all,
this is regarding listbox in zk 5.0.6. i have a list box which user can select (for removing the data). or click twice for displaying the data. however, when i use onClick, it automatically goes to the display page, meaning i cannot select it for removal.

when i use doubleClick, i have to select the data first (tick once), then double click. if i just double click at once, an error prompts with "System error: Please contact system admin"

how do i make it able to just double click, and not select it first.

thanks.

delete retag edit

## 10 Replies

Sort by » oldest newest

answered 2011-03-08 16:20:59 +0800

niting
111

Do you have a multi select Listbox?

If I understand your issue.

Try to use event onSelect for single Click.
For double click - try catching the doubleClick mouse event.
if you do not select a listitem from the box how do you capture the selected item?

Please post some snippets of code, it will help understand your issue better.

Thanks
Nitin

answered 2011-03-08 19:13:16 +0800

SimonPai
1696 1

Two approaches I can think of:

1.
Use nonselectableTags="*" to disable selection on single click (except for the checkboxes).
And then listen to onDoubleClick on Listitem.

2.
Use Grid, with a checkbox on the first cell of each Row. In this case you don't rely on the selection states if listbox but manage it by yourself.

IMHO it is better to distinguish the regions of two different mouse events. You probably don't want user to mix up removal and display anyway.

Regards,
Simon

answered 2011-03-08 20:26:47 +0800

zorosp
69 1

thanks niting and simonpai.
niting, yes it is a multiple listbox. the list is loaded first. user can select (check box) and then click remove button (if they want to remove that item). sorry i cannot post the code.
simon, i added nonSelectableTags="*" and user can oly select by checking the checkbox.but my problem is not resolved. the double click still does not work. i don't want user to have to check the check box first and then they have to double click it. i want it to go to next page upon a double click.

answered 2011-03-08 20:42:28 +0800

zorosp
69 1

i have one question. if we put check box in the list. it this the way it works? we have to select by checking the checkbox first? only then we can forward to double click?
because it works ok for list that does not have check boxes, doesn't it?

edited: i tried on zk sandbox. double click without checking checkbox is ok. this is the code i edited.

<window title="Listbox" border="normal">
<listbox rows="1" mold="select">
<listitem label="Inbox"/>
<listitem label="Received"/>
<listitem label="Draft"/>
</listbox>
<textbox id="textbok" value="do do dong" visible="false"/>
<separator bar="true"/>
<listbox multiple="true" checkmark="true"
onDoubleClick="textbok.visible=true">
<listhead sizable="true">
<listheader align="center" width="40px"
image="/img/Centigrade-Widget-Icons/ArrowsUpDown-16x16.png" />
<listheader align="center" width="40px" image="/img/Centigrade-Widget-Icons/Envelope-16x16.png" />
<listheader align="center" width="40px"
image="/img/Centigrade-Widget-Icons/PaperClip-16x16.png" />
<listheader label="Subject" sort="auto"/>
<listheader label="Received" sort="auto"/>
</listhead>
<listitem height="28px">
<listcell image="/img/Centigrade-Widget-Icons/ArrowUpOrange-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/EnvelopeOpen-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/PaperClip-16x16.png" />
<listcell label="ZK Jet 0.8.0 is released" />
<listcell label="2008/11/17 17:41:29" />
</listitem>
<listitem height="28px">
<listcell image="/img/Centigrade-Widget-Icons/ArrowDown-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/Envelope-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/PaperClip-16x16.png" />
<listcell label="URLs for iPhone-Optimized Google Sites" />
<listcell label="2008/11/17 15:56:37" />
</listitem>
<listitem height="28px">
<listcell label=" " />
<listcell image="/img/Centigrade-Widget-Icons/EnvelopeOpen-16x16.png" />
<listcell label=" " />
<listcell label="Style Guide for ZK 3.5 released" />
<listcell label="2008/11/14 13:23:07" />
</listitem>
<listitem height="28px">
<listcell image="/img/Centigrade-Widget-Icons/ArrowUpOrange-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/EnvelopeOpen-16x16.png" />
<listcell label=" " />
<listcell label="ZK Studio 0.9.0 released." />
<listcell label="2008/11/16 10:26:37" />
</listitem>
</listbox>
</window>

this is my code. however there is nul pointer exception when i double click without checking the checkbox first. the selectedItem is null.

<listbox id="myListbox" checkmark="true" multiple="true"
model="@{ct.myList}"
value="@{ct.myNote.myS}"
selectedItem="@{ct.myS}"
forward="onDoubleClick=onDisplayPage">

answered 2011-03-09 19:13:51 +0800

SimonPai
1696 1

Personally I don't recommend the design where user can potentially mix up click and double click in the same region. If you insist on allowing click and double click in the same region, it is even tricky to handle the events at DOM level. In the below example you can remove nonselectableTags="*" to see if it has your desired behavior, but when you double click, the item will be selected and unselected again (so the state is touched but unchanged just because we are lucky). There is no way to prevent the two onClick events when you do double click.

<zk>
<listbox onDoubleClick='alert("doule click")' multiple="true" nonselectableTags="*" checkmark="true">
<listitem>
<listcell>Item 1</listcell>
</listitem>
<listitem>
<listcell>Item 2</listcell>
</listitem>
</listbox>
</zk>


Regards,
Simon

answered 2011-03-09 19:27:12 +0800

zorosp
69 1

actually i have tried nonSelectableTags="*" but the problem is not resolved. i still have to check the box first, then double click. and there's another problem. if i checked multiple boxes, then double click on either one of them, it always goes to the first item in the list. the code worked well in zk 5.0.4, only after upgrading to 5.0.6 it becomes problematic.

answered 2011-03-09 19:46:02 +0800

SimonPai
1696 1

The selectedItem is the one you selected, not Event target. Register onDoubleClick on Listitem and use Event#getTarget() to retrieve the one you double clicked on.

<zk>
<listbox multiple="true" nonselectableTags="*" checkmark="true">
<listitem onDoubleClick='alert(event.target.value)' value="Item 1">
<listcell>Item 1</listcell>
</listitem>
<listitem onDoubleClick='alert(event.target.value)' value="Item 2">
<listcell>Item 2</listcell>
</listitem>
</listbox>
</zk>


Regards,
Simon

answered 2011-03-09 20:03:15 +0800

zorosp
69 1

thank you simon for your respond. but why did the code worked well in zk 5.0.4?

do i have to register doubleclick for every list item-list cell?

still, it goes to the first item in the list if i checked multiple boxes and doubleclick on either one of them.

yes, the example gave my desired result. but it does not work on my application. i use forward to go to next page.

answered 2011-03-10 08:38:47 +0800

niting
111

Not sure if select and rightClick would be an option.
A menupop could be assigned which would popup on right click. Single or multiple select could thus be handled.

Thanks
Nitin

answered 2011-03-10 19:29:30 +0800

zorosp
69 1

i think the problem is resolved. i put this in zk.xml. but other problems arise. but i have to check first if it has anything to do with the listbox. thanks niting and simon for your help.

<library-property>
<name>org.zkoss.zul.listbox.checkmarkDeselectOthers</name>
<value>true</value>
</library-property>

Your reply
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]

## Stats

Asked: 2011-03-08 02:18:34 +0800

Seen: 2,208 times

Last updated: Mar 10 '11

## Related questions

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