Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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.
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
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
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.
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">
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
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.
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
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.
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>
Asked: 2011-03-08 02:18:34 +0800
Seen: 2,220 times
Last updated: Mar 10 '11