How to select all in primefaces dataTable with liveScroll

Question

I'm using primefaces v5.3 dataTable with liveScroll="true" and selectionMode="multiple". Header checkbox selects only visible rows and when i scroll down new rows appear non selected. I want header checkbox to select all rows: visible and invisible. Selection of only visible rows is meaningless and useless. Is it possible to fix?

I tried to add all table data to selection by processing "toggleSelect, rowSelectCheckbox and rowUnselectCheckbox" events. It works on backend, but in UI rows are unselected anyway.

"Selection of only visible rows is meaningless and useless. Is it possible to fix?" for your usecase maybe. I've never heard this requirement in the last 5 years. And it is a dangerous requirement. Enduser might not expect this (I would not) and act on to many rows. Since it is an uncommon requirement, I doubt there is an easy workaround for this. Downloading the source of the component, checking that and see if you can 'fix' something there is the only thing I can think of. — Kukeltje

David Florez David Florez · Accepted Answer · 2016-12-29T21:19:33

Use this script to replace the original updateData function of primefaces

PrimeFaces.widget.DataTable.prototype.updateData = (function() {

    var cached_function = PrimeFaces.widget.DataTable.prototype.updateData;
    return function() {
        var reselectAll = (this.selection != undefined && (this.selection[0] === '@all' || this.selection.length === this.getTbody()[0].getElementsByTagName('tr').length);
        var result = cached_function.apply(this, arguments);
        if (reselectAll) {
            this.selectAllRows();
        }
        return result;
    };
})();

that will automatically select the new loaded rows on the table(only the ones that are visible on the client side)

How to select all in primefaces dataTable with liveScroll

1 Answers