Comments (3)
Generally I don't think that a tree is the best view to display 10k entries. A grid with paging support may be more adequate and provide better usability.
Anyway that doesn't mean that we should not improve here.
A possible approach could be to render the nodes in smaller chunks, e.g. 500 nodes at a time using setTimeout
.
That would yield control to the browser and would be worth a try.
from fancytree.
I agree on some kind of paging enhancement. I believe slickgrid dynamically adds/removes elements as the user scrolls in the viewport. Scrolling can cause a slight flicker though (since it is rendering on the fly). Still, might be a useful feature/option for 10K etc. large branches.
https://github.com/mleibman/SlickGrid/wiki
Virtual rendering
SlickGrid utilizes virtual rendering to enable you to easily work with hundreds of thousands of items without any drop in performance. In fact, there is no difference in performance between working with a grid with 10 rows versus a 100β000 rows. This is achieved through virtual rendering where only whatβs visible on the screen plus a small buffer is rendered. As the user scrolls, DOM nodes are continuously being created and removed. These operations are highly tuned to provide optimal performance under all browsers. The grid also adapts to the direction and speed of scroll to minimize the number of rows that need to be swapped out and to dynamically switch between synchronous and asynchronous rendering.
from fancytree.
I meant that we still render 10k nodes, but yield to the browser every now and then to prevent blocking.
Paging / virtual is a topic on it's own and much more involved. I don't think it will go into the core code in the near future (but may be a great extension module...)
from fancytree.
Related Issues (20)
- Cannot read properties of undefined (reading 'fancytree') HOT 4
- Change title property to some other property HOT 1
- DragDrop - error in console cause my object has circular references HOT 4
- Question: Can this work without jquery? HOT 1
- Fanctree expand is not working for the first expand click HOT 1
- filter/search: prevent node from expanding HOT 1
- remove extra space between icon and title HOT 1
- on iphone first touch does not expand/is ignored HOT 1
- getNodeByKey issue HOT 5
- Drag and drop feature doesn't scroll when dragging out of bounds on Grid + Viewport setup HOT 2
- Bump jQuery UI to 1.13.2
- Lazyload of a child node with postProcessing fails HOT 1
- getNodeByKey vs fromDict/applyPatch key type HOT 1
- Error HOT 1
- Fancytree is not a function error HOT 1
- Error HOT 1
- FancyTree filter breaks links. HOT 2
- jQuery .focus() is deprecated
- How to set default radio group when checked parent/ grandparent node HOT 1
- Save and Load Error HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fancytree.