Doubleclick event in a listbox, help me

JoH
105 2 3

Hello all,

How could I use a double click event by first selecting the listitem in the listbox and then doubleclick it to open another page?
The only thing I found is onSelect event for listbox.
I could do it by just onSelect="onTest()" but it's not practical, because it's quite disturbing.
What should I write in my method?

public void onTest() throws SuspendNotAllowedException, InterruptedException{

Window guestWnd = (Window)Executions.createComponents("test.zul", null, null);
guestWnd.doModal();
}

delete retag edit

11 Replies

9393 3 7 16
http://www.oxitec.de/

You can forwarding an event (onDoubleClick) in your ListItemRenderer to a method in the controller.

All Dialogs in the Zksample2 application are opend in such a case.
If you dont't won't to checkout the whole sources, have a look in an older thread here .
There are sources for a whole module stack. ListBox --> Controller --> Renderer --> onDoubleClick --> DialogController

best
Stephan

kesavkolla
180 3

I did an jQuery way of handling double click on listbox.

<listbox id="persons" fixedLayout="true" model="@{ customersearch$composer.results }" vflex="true"> <listhead> <listheader label="" width="20px" /> <listheader label="First Name" /> <listheader label="Last Name" /> <listheader label="email" /> <listheader label="Type" tooltiptext="pre,current or post Customers" /> </listhead> <listitem self="@{each='person'}" value="@{person }" class="@{person.id }"> <listcell image="/img/link_go.png" class="@{person.id }"> <attribute w:name="onClick">openPatient(jq(this));</attribute> </listcell> <listcell label="@{person.firstName}" /> <listcell label="@{person.lastName}" /> <listcell label="@{person.email}" /> <listcell label="@{person.personTypeStr}" /> </listitem> </listbox> <script type="text/javascript" defer="true">zk.afterMount(function() {setupResultsClick();});</script>  I had the above list box whose id is persons I setup a jQuery live event handler for double clicking on the list items to navigate to different page. I call that javascript from zk.afterMount. function setupResultsClick() {$("$persons").find("tr.z-listitem").live("dblclick", function() { var widget = zk.Widget.$(\$(this).attr("id"));
var sclass = widget._sclass;
if (sclass) {
window.location.href = "/pages/patient/patientview.zul?id=" + sclass;
}
});
}


HTH

JoH
105 2 3

Thank you everybody,

Senthilchettyin
2617 3 8
http://emrpms.blogspot.in...

Hi Stephan

Thank you very much for giving an idea on double click event on list item .
I have created small example here, so that new comers can easily catch it.

In latest ZK 6 , Still we need to do this way only, or ZK mvvm has alternate method for this ?

9393 3 7 16
http://www.oxitec.de/

Hi Senthilchettyin, nice work. Great.
Can be that it's a little bit confusing for new commers.I would spread it in two samples.

1. without ItemRenderer ( )

   . . .
<listitem self="@{each=p1}" forward="onDoubleClick=onDoubleClicked">
<listcell label="@{p1.firstName}" ></listcell>
<listcell label="@{p1.LastName}" ></listcell>
</listitem>
</listbox>


So you need not the ItemRenderer code in the class.The rendering informations are here in zul.

2. with ItemRenderer ( )

  . . .
</listbox>


A renderer make much sense if you need some logic for the visualisation i.e. different colors for values or showing icons (flags) instead of a saved locale like 'en' or 'de' .

You can also use so called 'converters' on each listcell for such visualisation who depends on logic.

For mvvm i cannot speak because i prefer and work with the 'old' databinding way. Hope others can answer.

best
Stephan

Senthilchettyin
2617 3 8
http://emrpms.blogspot.in...

Hi Stephan

Thank you for explaining the concepts. As you said correctly, custom renderer are needed only we need to format some values like date, phone no, some color, etc.
In related to that, actually i want to change the color of the some rows based on some condition. I have somehow achieved that, but i done for each cell. Is there any way, we can do the same by applying for the list item itself, instead of making each cell.

You can see that thread here/

Senthilchettyin
2617 3 8
http://emrpms.blogspot.in...

Hi Stephen

You said, no change in my class, but it throws null value because we refer the data attribute

public void onDoubleClicked(Event event) throws Exception {
// get the selected object
Listitem item = listPerson.getSelectedItem();
Person p1= (Person) item.getAttribute("data");
Messagebox.show(p1.getFirstName());
}

9393 3 7 16
http://www.oxitec.de/

Hmmm, from my understanding the ListItem works as a container for holding the object (data) . The data properties are visualized in the Listcells. So the right place for css manipulations are the child components of the Listcells.

9393 3 7 16
http://www.oxitec.de/

Try with: .getValue() . it results an object which you can cast.

Listitem item = listPerson.getSelectedItem();
Person p1= (Person) item.getValue();

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

How can we implement DoubleClick.When we have checkmark=true and multiple = true. Please share your ideas.
thanks

[hide preview]