1

I'm trying to implement the PrimeNG VirtualScroller component for dealing with large data lists. The problem is, that, when I put a p-checkbox, bound to a list on [(ngModel)], inside the template, check the checkbox, and scroll the list for loading the next values, some of the next values display checked as well, but they have not been clicked at all...

Below it's my code:

<p-virtualScroller [value]="filtered" scrollHeight="77px" [itemSize]="30" rows="50">
              <ng-template pTemplate="item" let-option>
                
                <p-checkbox [(ngModel)]="selectedValues" (click)="onUserCheckboxClick()" name="selectedValues"
                  label="{{(option.customLabel ? option.customLabel : option.label)}}" value="{{option.value}}"
                   labelStyleClass="username-checkbox-label">
                </p-checkbox>

              </ng-template>
              
</p-virtualScroller>

Have you guys ever faced something like that using PrimeNG's VirtualScroller?

I believe it's an issue with PrimeNG component indeed, but maybe I'm doing the wrong thing here...

here it's the url for the documentation:

https://www.primefaces.org/primeng/v9.1.4-lts/#/virtualscroller

thank you in advance!

user6435554
  • 189
  • 11

1 Answers1

0

I think that the problem here is that your are using selectedValues as ngModel for all the checkboxes, so all have the same model. You can solve this if option have a bool property for example. So at the end, you will have something like this:

<p-checkbox [(ngModel)]="option.checked" (click)="onUserCheckboxClick()" name="selectedValues"
              label="{{(option.customLabel ? option.customLabel : option.label)}}" value="{{option.value}}"
               labelStyleClass="username-checkbox-label">
</p-checkbox>

You can check this example I made based on prime docs where you can see each checkbox work independently: https://primeng-virtualscroller-demo-ssaw8h.stackblitz.io

Erik
  • 97
  • 2
  • 8