jeudi 31 octobre 2019

Wicket Checkboxes in datatable with pagination

I am using Datatables jquery table in Wicket. In java code, I am preparing with RepeatingViews the table thead and tbody HTML tags and then I am calling DataTable javascript constructor to create table with paging, sorting and so on.

I want to add the checkbox column to the table. Main checkbox in thead (title of the table) should switch all rows checkboxes in the table.

The problem is pagination, when I click on main checkbox, some checkboxes are not existing in the DOM, because they are on different table pages. Wicket throws me this errors:

ERROR: Wicket.Ajax.Call.processComponent: Component with id [[id187]] was not found while trying to perform markup update. Make sure you called component.setOutputMarkupId(true) on the component whose markup you are trying to update.
ERROR: Cannot bind a listener for event "change" on element "checkbox76" because the element is not in the DOM

The code which is bound on main checkbox is:

    @Override
    public void update(AjaxRequestTarget target, boolean state) {
        for (int i = 0; i < rowsCheckboxes.size(); i++) {
            CustomCheckbox checkbox = rowsCheckboxes.get(i);
            checkbox.setState(state);
            target.add(checkbox);
        }
    }

CustomCheckbox looks like:

public abstract class CustomCheckbox extends Panel {
    private static final long serialVersionUID = 1L;

    private boolean state;
    public CheckBox checkbox;

    public CustomCheckbox(String id) {
        super(id);

        checkbox = new CheckBox("checkbox", new PropertyModel<>(this, "state"));
        checkbox.add(new OnChangeAjaxBehavior() {
            private static final long serialVersionUID = 1L;

            @Override
            protected void onUpdate(AjaxRequestTarget target) {
                update(target, state);
            }
        });

        setOutputMarkupId(true);
        add(checkbox);
    }

    public abstract void update(AjaxRequestTarget target, boolean state);

    public void setState(boolean state) {
        this.state = state;
    }

}

HTML of this CustomCheckbox:

<wicket:panel>
    <span class="custom-checkbox">
        <input wicket:id="checkbox" type="checkbox">
        <label for="select"></label>
    </span>
</wicket:panel>

How can I approach this problem? I would like to switch with main checkbox all checkboxes located on current table page which is shown to user right now.

I have tried this, but without success:

setOutputMarkupId(true);
setOutputMarkupPlaceholderTag(true);

These checkboxes I am using for clone or delete the table items.

Thanks for any answer.




Aucun commentaire:

Enregistrer un commentaire