Adding select/deselect all checkbox to wicket DataTable

Question

I'm new to wicket and I don't know jQuery at all. I use wicket 6.9.0. I need to add select/deselect all checkbox to wicket DataTable. I've read and implemented example from "Apache Wicket Cookbook", you can see it on page 28 here Apache Wicket Cookbook. Chapter 5 but deselect all does not work. I've read also suggestion here: http://evanchooly.com/logs/%23%23wicket/2011-08-31

The problem is - I have no idea how to implement it via Check*Selector or somehow. Could anyone please help my with simple useful example?

** Update:**

As @svenmeier wrote in comment. I'm trying to add the checkgroupselector to select all the checkboxes and I did the following:

Form form = new Form("form");

CheckGroup group = new CheckGroup("group");
   group.add(new CheckGroupSelector("groupselector"));
   DataTable sourceTable = new DataTable("mytable", getColumns(), getDataProvider(), 10);
   sourceTable.setOutputMarkupPlaceholderTag(true);
   group.add(sourceTable);
   add(form);
   form.add(group);


private List getColumns() {
        List<IColumn<MyItem, String>> ret = Lists.newArrayList();
        ret.add(new AbstractColumn<MyItem, String>(new Model<>("")) {
            @Override
            public void populateItem(Item<ICellPopulator<MyItem>> cellItem, String componentId, IModel<MyItem> rowModel) {
                CheckBoxPanel checkBoxPanel = new CheckBoxPanel(componentId);
                cellItem.add(checkBoxPanel);
            }
        });
...
}

<span wicket:id="group">
<input type="checkbox" wicket:id="groupselector">check/uncheck all</input>
<table wicket:id="mytable">[Lookup Results]</table>
</span>

To add CheckBox to the DataTable I must use a Panel, so I have the following:

public class CheckBoxPanel extends Panel {

    private CheckBox field;

    public CheckBoxPanel(String id, IModel<Boolean> model) {
        super(id);
        field = new CheckBox("checkBox", model);
        add(field);
    }

    public CheckBoxPanel(String id) {
        this(id, new Model<Boolean>());
    }

    public CheckBox getField() {
        return field;
    }
}

In CheckBoxPanel.html

<body>
    <wicket:panel xmlns:wicket="http://wicket.apache.org">
        <input type="checkbox" wicket:id="checkBox">
    </wicket:panel>
</body>

Actually it does show checkgroup but under my table and checking/un-checking it does not affect the check boxes under it. What am I doing wrong here?

Your 'suggestion' link is broken. Is this a duplicate of http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript?rq=1 ?? — DevlshOne, Jul 10 '13 at 14:48
Thanks for information about broken link, I fixed it. But my question is not a duplicate of [link](http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript?rq=1). My question is about wicket DataTable and how to add CheckBox there, maybe without directly usage of jquery scripts. I can't find answer on the link. — user2565039, Jul 11 '13 at 09:31

score 1 · Answer 1 · answered Nov 26 '15 at 10:42

I've implemented the same example from Apache Wicket Cookbook. Chapter 5 on page 118 'Adding select/deselect all checkbox' and run into the same problem. SelectAll works, DeselectAll won't. This could be fixed:

change the jQuery statement from

private final String js="var val=$(this).attr('checked'); $('." + uuid + "').each(function() { $(this).attr('checked', val); });";

to

private final String js = "if($(this).attr('checked') == 'checked') {var val=true;} else {var val=false;}$('." + uuid + "').each(function() { $(this).attr('checked', val); });";

The problem in the first statement is, that val is 'undefined' and not 'false', if the checkbox is unchecked.

score 0 · Answer 2 · answered Jul 11 '13 at 08:01

0

See example usage here:

http://www.wicket-library.com/wicket-examples/compref/wicket/bookmarkable/org.apache.wicket.examples.compref.CheckGroupPage

It uses a ListView instead of a DataTable for CheckGroupSelector this doesn't matter.

answered Jul 11 '13 at 08:01

svenmeier

5,681
17
22

Thank you for you comment! I've tried to use this example with DataTable instead of ListView and I don't know how to do it in right way. I am trying to add the checkgroupselector to select all the checkboxes and I did the following: – user2565039 Jul 11 '13 at 09:38
Nice example but how can I check all the items in the datatable when I have only a part at the moment, because the table is paginated? – TOUDIdel Feb 23 '14 at 10:10

Adding select/deselect all checkbox to wicket DataTable

2 Answers2