0

Can not select all when using listbox?

asked 2014-12-14 14:36:08 +0800

bkstorm gravatar image bkstorm
38 3

updated 2014-12-14 22:55:44 +0800

When listbox appears, I can select all. But, when I move to next page, I can't select all items. Here is a video about this problem.
youtube.com/watch?v=cihVBNN-I3g&feature=youtu.be
And here is listbox in zul file:

                    <listbox id="lbListObject" mold="paging"
                    emptyMessage="Không có dữ liệu" pageSize="5" checkmark="true">
                    <listhead>
                        <listheader label="STT" hflex="min" />
                        <listheader label="Mã chức năng" />
                        <listheader label="Tên chức năng" />
                        <listheader label="Đường dẫn" />
                        <listheader label="Loại chức năng" />
                        <listheader label="Thứ tự" />
                        <listheader label="Mô tả" />
                        <listheader label="Trạng thái" />
                        <listheader align="center" label="Xem"
                            hflex="min" />
                        <listheader align="center" label="Sửa"
                            hflex="min" />
                    </listhead>
                    <template name="model">
                        <listitem>
                            <listcell
                                label="${forEachStatus.index+1}" />
                            <listcell label="${each.objectCode}" />
                            <listcell label="${each.objectName}" />
                            <listcell label="${each.objectUrl}" />
                            <listcell>
                                <label value="Module"
                                    if="${each.objectTypeId == 1}" />
                                <label value="Component"
                                    if="${each.objectTypeId == 0}" />
                            </listcell>
                            <listcell label="${each.ord}" />
                            <listcell label="${each.description}" />
                            <listcell>
                                <label if="${each.status == 1}"
                                    value="Hoạt động" />
                                <label if="${each.status != 1}"
                                    value="Bị khóa" />
                            </listcell>
                            <listcell>
                                <image
                                    src="/Share/img/icon/view.png" width="20px" height="20px"
                                    forward="onClick=lbListObject.onOpenView(${each})" />
                            </listcell>
                            <listcell>
                                <image
                                    src="/Share/img/icon/edit.png" width="20px" height="20px"
                                    forward="onClick=lbListObject.onOpenUpdate(${each})" />
                            </listcell>
                        </listitem>
                    </template>
                </listbox>

What's wrong? I'm using Zk 6.

delete flag offensive retag edit

10 Answers

Sort by » oldest newest most voted
0

answered 2014-12-15 09:57:14 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Do not use the 'checkmark' attribute. Make your own implementation.

Only a small sample.

zul:

<zk xmlns="&lt;a href=" http:="" www.zkoss.org="" 2005="" zul"="">http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:w="http://www.zkoss.org/2005/zk/client" xmlns:n="http://www.zkoss.org/2005/zk/native" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

    <window width="500px" height="300px">
        <listbox id="lbListObject" mold="paging" emptyMessage="Không có dữ liệu" pageSize="5"
            apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.mysamples.listbox.ListboxCheckAllVM')">
            <listhead>
                <listheader>
                    <checkbox id="chkb_all" label="check all" />
                </listheader>
                <listheader label="Lastname" />
                <listheader label="Firstname" />
            </listhead>

            <listitem></listitem>
        </listbox>

    </window>
</zk>

VM:

public class ListboxCheckAllVM {

    private Listbox listbox;
    private int pageSize = 5;

    @Init
    public void initSetup() {

    }

    @AfterCompose
    public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {

        if (view instanceof Listbox) {
            this.listbox = (Listbox) view;
        }

        if (this.listbox != null) {
            this.listbox.getFellow("chkb_all").addEventListener("onCheck", new CheckAllListener());
            this.listbox.setPageSize(this.pageSize);
            this.listbox.setModel(new ListModelList<Person>(getAllPersons()));
            this.listbox.setItemRenderer(new CheckAllItemRenderer());
        }
    }

    /**
     * Inner Listener class.<br>
     * onCheck for the 'mark all for deleting' Checkbox.
     * 
     */
    private final class CheckAllListener implements SerializableEventListener<Event> {

        private static final long serialVersionUID = 1L;

        @Override
        public void onEvent(Event event) throws Exception {

            Checkbox ckb = (Checkbox) event.getTarget();

            if (ckb.isChecked()) {
                checkAllItems(true);
            } else {
                checkAllItems(false);
            }
        }

    }

    /**
     * EN: Checks/unchecks all items as marked for deleting.<br>
     */
    @SuppressWarnings("unchecked")
    public void checkAllItems(boolean checkAll) {

        List<Listitem> list = this.listbox.getItems();

        if (list.size() > 0) {
            for (Listitem li : list) {
                if (li.getFirstChild().getFirstChild() instanceof Checkbox) {
                    Checkbox cb = (Checkbox) li.getFirstChild().getFirstChild();
                    cb.setChecked(checkAll);
                }
            }
        }
        this.listbox.invalidate();
    }

    public class Person implements Serializable {

        private static final long serialVersionUID = 1L;
        private String lastname;
        private String firstname;

        public Person() {
        }

        public Person(String _lastname, String _firstname) {
            this.lastname = _lastname;
            this.firstname = _firstname;
        }

        public String getLastname() {
            return this.lastname;
        }

        public void setLastname(String _lastname) {
            this.lastname = _lastname;
        }

        public String getFirstname() {
            return this.firstname;
        }

        public void setFirstname(String _firstname) {
            this.firstname = _firstname;
        }
    }

    private List<Person> getAllPersons() {
        List<Person> list = new ArrayList<Person>();
        list.add(new Person("Doe1", "John"));
        list.add(new Person("Doe2", "John"));
        list.add(new Person("Doe3", "John"));
        list.add(new Person("Doe4", "John"));
        list.add(new Person("Doe5", "John"));
        list.add(new Person("Doe6", "John"));
        list.add(new Person("Doe7", "John"));
        list.add(new Person("Doe8", "John"));
        list.add(new Person("Doe9", "John"));

        return list;
    }

}

ListItemRenderer:

public class CheckAllItemRenderer implements ListitemRenderer<Person>, Serializable {

    private static final long serialVersionUID = 1L;

    private Listbox lb;

    @Override
    public void render(Listitem item, Person data, int index) throws Exception {

        Person obj = (Person) data;

        Listcell lc;
        Label lb;
        Checkbox cb;

        // Delete Checkbox
        lc = new Listcell();
        cb = new Checkbox();
        cb.setParent(lc);
        cb.setChecked(false);
        cb.setStyle("padding-left: 3px;");
        cb.setTooltiptext("Mark for delete");
        lc.setParent(item);

        // Lastname
        lc = new Listcell();
        lb = new Label();
        lb.setValue(obj.getLastname());
        lb.setParent(lc);
        lc.setParent(item);

        // Firstname
        lc = new Listcell();
        lb = new Label();
        lb.setValue(obj.getFirstname());
        lb.setParent(lc);
        lc.setParent(item);

    }

}

best Stephan

link publish delete flag offensive edit
0

answered 2014-12-14 15:54:39 +0800

Darksu gravatar image Darksu
1991 1 4

Hello bkstorm,

At the following url, you can find an example of a working listbox with select all.

http://zkfiddle.org/sample/1bli5sh/4-Listbox-Selectall

Best Regards,

Darksu

link publish delete flag offensive edit
0

answered 2014-12-14 22:58:37 +0800

bkstorm gravatar image bkstorm
38 3

updated 2014-12-14 22:59:03 +0800

Hey, I don't want to use another component (in your example, it's a button) to select all items in listbox, I want to use the checkbox that is in listbox's headers. But, as you can see my video from youtube, I can't, I don't know why.

link publish delete flag offensive edit
0

answered 2014-12-15 08:08:15 +0800

zgadul gravatar image zgadul
1
http://www.obserwatorbank...

thanks for this :)

link publish delete flag offensive edit
0

answered 2014-12-15 08:32:42 +0800

tirtum gravatar image tirtum
1
http://jakoszczedzic.blog...

I had simillar problem

link publish delete flag offensive edit
0

answered 2014-12-15 08:35:11 +0800

nuferras gravatar image nuferras
1
http://www.obserwatorkred...

and, how do you deal with it?

link publish delete flag offensive edit
0

answered 2014-12-15 11:57:51 +0800

tielak gravatar image tielak
1

Terry deal with it :D gj dude!

link publish delete flag offensive edit
0

answered 2014-12-15 14:31:33 +0800

bkstorm gravatar image bkstorm
38 3

No no, you don't understand my problem. I'm going to explain it again. On the first page, when I click on the checkbox, listbox'll select all items of the page. It's ok. Now, I move to next page, the second page. I click on the checkbox, I want listbox to select only all items of the second page, but nothing happen, I can't select all items of the second page, that's the problem. Is it a error? You can see my video again.

link publish delete flag offensive edit

Comments

Alter the checkall renderer to check only the current page. It's not that hard to change the implementation of that.

chillworld ( 2014-12-15 14:47:17 +0800 )edit

That's right, It's not hard. It's waste of time, I have to implement listItemRenderer. So what happens if I have many listbox?

bkstorm ( 2014-12-16 04:42:41 +0800 )edit

@bkStorm, I just implemented in mine project the same I use zk 7.0.1 and it's exactly what you want.(mvvm and gettling a ListModelList where multiple is set to true)

chillworld ( 2014-12-17 11:02:55 +0800 )edit
0

answered 2014-12-15 14:58:42 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

@bkstorm I have seen that behavior but have not the time to evaluate why the UI is not actualized by the second onCheck event. Therefore i have use listbox.invalidate(); But the way is correct. You must setup your customized 'CHECKALL' stuff.

@Chillworld There is really a problem. Only the first onCheck is well synchronized in the UI. (Tested here with 7.0.3) Therefore i have must used the .invalidate(). Can you check this too?

link publish delete flag offensive edit
0

answered 2014-12-16 04:45:55 +0800

bkstorm gravatar image bkstorm
38 3

updated 2014-12-16 04:48:46 +0800

@terrytornado OK, I'm going to use your way.Thank for supporting me!

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
2 followers

RSS

Stats

Asked: 2014-12-14 14:36:08 +0800

Seen: 38 times

Last updated: Dec 16 '14

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