[Selection with pagination] p-table with selectionMode="multiple" and with lazy loading

[noe.bug]

Hello,

Is there a way to "select all" by page when using primeng p-table with selectionMode=multiple and lazy loading ?

I mean I would like to "select all" the data from the current page, but when I click the next page (and request the data from the backend), to keep the selections from the previous page and be able to repeat the "select all" for all the next pages.

Thank you in advance!

[PhilHuhn]

Hey:

This is my thought on it.

Code: Select all

<p-table [value]='values' [(selection)]='selected'
  ...

I am thinking it maybe as simple as the following:

Code: Select all

buttonAllSelected( event: any ): boolean {
  this.selected = this.values
  return false;
}

[noe.bug]

Thank you for your reply.
But I am using lazy loading, so for each page I retrieve the data from the backend.
For page 1 I have the data, but for page 2 I retrieve the data only when I click the page.
This means I cannot select all the elements, because I do not have them.

This is why it would be great to have a mechanism to select all the current elements from the current page and then as navigating from one page to another, to add to the already selected elements, all the elements from page 2 for example, by clicking the header checkbox.

This means the header checkbox should be dependent by the current page only.

[PhilHuhn]

Hey:
The purpose of lazy-loading is to tell the back-end to load only the required data. If one has a million rows then that would kill the application unless one uses lazy-loading. The collection in values should be only the page of data. If you are not doing that then the issue is how you are handling your back-end data.
Phil

[PhilHuhn]

Hey:
Per PrimeNG:

in a real application, make a remote request to load data using state metadata from event
event.first = First row offset
event.rows = Number of rows per page
event.sortField = Field name to sort with
event.sortOrder = Sort order as number, 1 for asc and -1 for dec
filters: FilterMetadata object having field as key and filter value, filter matchMode as value

The source code of LazyLoadEvent:

Code: Select all

import { SortMeta } from './sortmeta';
import { FilterMetadata } from './filtermetadata';
export interface LazyLoadEvent {
    first?: number;
    rows?: number;
    sortField?: string;
    sortOrder?: number;
    multiSortMeta?: SortMeta[];
    filters?: {
        [s: string]: FilterMetadata;
    };
    globalFilter?: any;
}

Code: Select all

export interface FilterMetadata {
    value?: any;
    matchMode?: string;
    operator?: string;
}

I found the filters hard to work with initially. The 's' string is an associative array (key). The FilterMetadata can be an array of values.

[noe.bug]

Hey,
Yes I totally agree, this is the purpose of lazy loading.
However, if you do a lazy loading using the p-table primeng component, the behaviour is inconsistent.
If I select the header checkbox in page 1, then I go to page 2, the header checkbox remains selected.
See the ex below.
https://stackblitz.com/edit/github-me2e ... mponent.ts

What I want to achieve is to be able to multiselect the data by page, as I retrieve it from the backend and to add it to the already selected ones.

If I redo the select all in page 2, I will lose the selected data in page 1.

Without lazy loading, it is simple, I select all data at once. But what if I need to resolve both case, to multiselect without lazy loading and with. I would need to tell to the user, that we have different behaviours.

[PhilHuhn]

Hey:
I thought I could get it done but I was not able to get it. I agree something is funky with clicking off of the current page and the TableHeaderCheckbox state. I tried to use both ViewChild and ElementRef to change the DOM, but no luck.

I suggest you post an issue on the PrimeNG GitHub account.
https://github.com/primefaces/primeng/issues

Another option I use is to post on StackOverflow. Make sure you tag it with 'primeng'. You already have the StackBlitz to demonstrate the question.

[noe.bug]

Hey,
Thank you, yes I did post a github issue: https://github.com/primefaces/primeng/issues/10357
Hopefully it will be solved.