Questions tagged [virtualscroll]

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)

enter image description here

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…
famed1900
  • 39
  • 4
1
vote
3 answers

virtual-scroll returning empty Array

HTML:
{{item.name}}
In component i am…
Priya
  • 1,017
  • 3
  • 15
  • 22
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 =…
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…
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…
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…
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…
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…
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
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…
  • 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 :
    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…
    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…
    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…