Listbox with delete buttons

asked 2015-06-05 09:35:20 +0800

josefsabater gravatar image josefsabater
17 4


I want to create a listbox that contains a delete button for each row. I implemented the following code does not work because the buttons may not have the ID property because it repeats and skips a failure duplicate ID.

----------- Controller.java -----------

private Listbox listboxDocumentos;

public void doAfterCompose(final Component comp) throws Exception {

   final List<DocsBean> docs = docsService.getDocs();
   listboxDocumentos.setModel(new ListModelList<DocsBean>(docs));

@Listen("onClick = #btnDelete")
public void delete(final Event event) {
   // implements

----------- listDocs.zul -----------

<listbox id="listboxDocumentos" nonselectableTags="" mold="paging" pageSize="5" multiple="false"  >
    <listheader label="Nombre" sort="auto" width="42%" />
    <listheader label="Version" sort="auto" width="6%"/>
    <listheader label="Tamaño" sort="auto" width="7%"  />
    <listheader label="Tipo" sort="auto" width="8%"  />
    <listheader label="Usuario" sort="auto" width="20%" />
    <listheader label="Fecha" sort="auto" width="12%" />
    <listheader label="Action" width="5%" align="center" />
<template name="model">
    <listitem id="${each.id}">
        <listcell label="${each.nombre}" />
        <listcell label="${each.version}" />
        <listcell label="${each.tamanyo}" />
        <listcell label="${each.formato}" />
        <listcell label="${each.nombreUsuario}" />
        <listcell label="${each.fechaRegistroFormat}" />
        <listcell >
            <button id="btnDelete" image="/core/static/css/images/delete-icon.png" />


Does anyone know how?

Thank you.

delete flag offensive retag edit

5 Answers

Sort by » oldest newest most voted

answered 2015-06-08 02:21:46 +0800

cor3000 gravatar image cor3000
3808 1 7
ZK Team

You can keep the template-approach in combination with event forwarding:

As you can see in this running example there is no need for an id on each item. As the listbox receives the event (even with a custom/nice name "onDeleteItem") and the item's object is passed to the event listener as the event.getData().

Have fun!


link publish delete flag offensive edit

answered 2015-06-05 09:46:41 +0800

Darksu gravatar image Darksu
1991 1 4

Hello josefsabater,

You can easily implement it using a Listbox Renderer and adding a event listener to the button as shown below:



Please let me know if you need more help.

Best Regards,


link publish delete flag offensive edit

answered 2015-06-16 17:08:59 +0800

josefsabater gravatar image josefsabater
17 4

Thank you very much to you both!

The two solutions are correct but I finally used to cor3000 for simplicity.


link publish delete flag offensive edit

answered 2015-06-18 10:39:35 +0800

silniczek gravatar image silniczek

thanks for help!!!

link publish delete flag offensive edit

answered 2015-06-19 07:05:49 +0800

kellapik gravatar image kellapik

yay that is amazing!

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

1 follower



Asked: 2015-06-05 09:35:20 +0800

Seen: 104 times

Last updated: Jun 19 '15