A UI technique dedicated to increase the performance of large scrollable lists by rendering only a small portion of the data at a moment and virtualising other parts of the dataset, so that the scrollbar parameters remain consistent and a user experiences the result interface close to the original one (without virtualisation)
Questions tagged [virtualscroll]
97 questions
1
vote
2 answers
Reactive forms inside virtual list behave erratic
I was checking virtual scroll list with reactive forms. Scenario is that i have thousands of rows to show
in a list with checkboxes to approve or disprove.
So inside virtual list i am generating form group with [formGroupName]="i".
But if i check…
![](../../users/profiles/3139439.webp)
famed1900
- 39
- 4
1
vote
3 answers
1
vote
1 answer
Ionic - Scroll to a particular element Virtual Scroll
i have the following code.
home.html:
{{date.holiday}}
home.ts:
scrollTo(){
let yOffset =…
![](../../users/profiles/9573302.webp)
Akash Mahale
- 43
- 9
1
vote
0 answers
Ionic3 virtualScroll gives blank list when scrolling far ahead on large list
Using Ionic3 to implement large list scrolling with virtualScroll.
I added a vertical slider (input range) linked to a function using Ionic3
this.content.scrollTo(0, yVal, 1000)
to scroll back and forth but if I scroll too far ahead in the list, I…
![](../../users/profiles/6641736.webp)
pic
- 11
- 6
1
vote
0 answers
Angular4 NgFor select box with a large array
I'm working on a project in which I would like to populate a selectbox with all the cities of a certain country. The array I get from my db is about 2800 records long. When Angular renders this selectbox it takes pretty long although the data is…
![](../../users/profiles/7815081.webp)
Maarten De Weerdt
- 33
- 1
- 6
1
vote
1 answer
Virtual scrolling on javascript
I make virtual scrolling by using this fiddle.
I can not understand how to get the real scrollable height;
If I change row size, it doesn't work.
And the if I made small size, such as 200, it doesn't work,too.
var s = 20000000 // row…
![](../../users/profiles/3361592.webp)
egaoneko
- 319
- 1
- 5
- 20
1
vote
1 answer
Prevent angular-ui ui-scroll from loading in hidden div
I have an angular-ui ui-scroll directive (1.3.0) living in a div that is hidden by default with an ng-show. When it is hidden, ui-scroll just keeps loading data from the datasource even though the ui-scroll-viewport's height is set. If the div is…
![](../../users/profiles/600299.webp)
Mark Nadig
- 4,372
- 3
- 31
- 41
0
votes
0 answers
Virtual scroll - Angular 7 how to scroll to index given in search box
I have added virtual scroll to accordion. Inside the accordion I have images with page-number.
I want to scroll to the position where the page number is present once I enter the value in a search box.
I tried adding scrollToView in the javascript…
![](../../users/profiles/13738106.webp)
Janani Sridhar
- 46
- 3
0
votes
0 answers
Virtual scroll for Angular material table columns
I have a material table with around 1000 columns and I want to virtualize these columns, there are a lot of examples that show virtualization of rows using cdk-virtual-scroll but not for columns. Is there a way to do the virtualizations to columns.
0
votes
0 answers
Virtual scrolling Not working in Angular with response data- cdk-virtual-scroll-viewport
I am not able to bind the cdk-virtual-scroll-viewport with data in my Angular html.
This is the data in my jobLists array which is assigned with response data in ngOnInit
In my html class i have sample like this
![](../../users/profiles/2366166.webp)
Nithin Paul
- 1,713
- 1
- 25
- 44
0
votes
0 answers
Vue.js Virtual Scroller with ul and li and add/del item
I make virtual scrolling by using this fiddle.
How would you go about getting this:
How to delete a that you want (by index for example) with update of the div
How to add a new with update of the div
The goal is to obtain an ul with…
![](../../users/profiles/11313316.webp)
EtienneMaid
- 1
- 3
0
votes
0 answers
Primereact - Problem with lazy loading and filtering
I am facing an issue with the DataTable component of primereact. When I am using the lazy parameter I can use filters with no problem but when i'm using lazy + filter it's not filtering my table
this way the filter is working fine :
![](../../users/profiles/12290809.webp)
Hugo dz
- 35
- 3
0
votes
0 answers
Angular Material multi select component with virtual-scroll
I'm trying to create a custom multi select component, based on the angular-material select component (v10), with virtual-scroll and a custom search input inside the component's overlay.
I also added a mat-select-trigger element to display the number…
![](../../users/profiles/2744727.webp)
helderabreu
- 1
- 1
0
votes
0 answers
rows style vue-virtual-scroller not show correct
I'm using Akryum/vue-virtual-scroller plugin and I have list that each record is component and inside each
component have dropdown
When the record is opened, it looks like this:
The solution that came to my mind was that between the two lines, the…
![](../../users/profiles/10644316.webp)
Mohamadreza Hedayati
- 23
- 4
0
votes
0 answers
Angular CDK virtual scrolling issue
Having issue to render huge list by using Angular CDK virtual scrolling.
Need set the itemsize to 1 to load the list properly.
Expected to load the list according to viewport size.
But it load far far more than the viewport size.
which the viewport…
![](../../users/profiles/2763431.webp)
Dodo
- 93
- 2
- 5