search

CirclonGroup / angular-tree-component

A simple yet powerful tree component for Angular (>=2)
https://angular2-tree.readme.io/docs
MIT License
1.1k stars 493 forks source link

[Feature] Virtual Scroll loads Async Data #393

Open charles221133 opened 7 years ago

charles221133 commented 7 years ago

I've got trees with thousands of values at a single level.

I need to load the first 50 or so values, then, when the user scrolls to the bottom of those values, the next 50 are loaded via web request.

Is there any way to do this currently? Really i just need a function to be called when we reach the bottom of the existing list, sort of like getChildren is called when a user expands a node.

ibookhotel commented 7 years ago

Hi,

Any progress on this?

I am trying to:

  1. mock node index array returned in TreeNodeCollectionComponent ngOnInit react expression
  2. Find way to mock visibleNodes indexes based on new total filed (currently static) in TreeVirtualScroll
  3. Create TreeNodeModel array in react effect method and refresh state of TreeModel

Is this good way to go to enable virtual scroll Async Data, any suggestion would be appreciated.

Best regards, Ivan

kmanikandanmca2008 commented 5 years ago

I need exactly the above mentioned use case. Also the async data should load parent & child level independently.What i'm trying to achieve here is for instance,

  1. root level nodes count is 5000 , so i need to load all these lazily with the subset of data which occupies available viewport(let say 20 at a time).On scroll need to fetch next 20 nodes from server and do continue.
  2. By toggling any root node which has the property 'hasChildren' to true, Need to fetch only children nodes of count 20(by passing the parent node id and assume 1000 children nodes are available).On scroll need to fetch next 20 nodes from server and do continue.

@adamkleingit Can you comment on my use case like ,

  1. is this possible using this component ?
  2. If possible can you give some example to refer?
kmanikandanmca2008 commented 5 years ago

I've got trees with thousands of values at a single level.

I need to load the first 50 or so values, then, when the user scrolls to the bottom of those values, the next 50 are loaded via web request.

Is there any way to do this currently? Really i just need a function to be called when we reach the bottom of the existing list, sort of like getChildren is called when a user expands a node.

@charles221133 I have found the solution for the same issue. I have used ngx-infinite-scroll pkg ( https://github.com/orizens/ngx-infinite-scroll.git) and accomplished the tree nodes infinite scrolling. I just want to update my solution here.If anybody wants further sample then i can provide stackblitz.