Comments (13)
Can you figure it out?
from react-orgchart.
Not yet. I dont know how.
from react-orgchart.
I guess you can achieve this with some css classes or send some of the node data and when clicked add more data to it. Though I am having difficulties with onClick method inside custom node template
from react-orgchart.
For jquery version, can using visibleLevel. How about react version?
from react-orgchart.
I had to handle it myself, I send a prop called manager level and when getting managers I added index as manager level
from react-orgchart.
I still cant solving this problem. Any body can help?
from react-orgchart.
@erbaafidotama I made a recursive tree, my object is like { user: Ozan, Manager: Jonathan 0 } then I query Jonathan and get whose manager Jonathan and set them my associates, if Jonathan has manager, get the manager and so on. When you are getting managers you can count the managerLevel you passed and stop when the level reached. If you can't apply this method, show me your code I'll give u a hand
from react-orgchart.
@MudulOzan for example, i just follow demo from this repo.
https://codesandbox.io/s/bold-lumiere-tb288?file=/src/App.js
I fetching all my data. In that example, i have 4 levels. But i just want show 3 levels in first show. then when i click expand in node "Hei Hei"s childrens will showing.
from react-orgchart.
It sounds hard to achieve with full chart for me, let your users have manager object which allows you to build the node tree by your own. Then you can do recursive calls and add your managers or if you are going top to bottom add your underlings. Also you are going to need a custom node which is documented here. Whenever user clicks a node you need to call a method with clicked user's id and reorganize your tree according to that.
This is how I managed to do it, I call getSelectedUser first, then it calls recursive methods. If user clicks a node, it also triggers getSelectedUser. My approach may not be the best but well, it work :P
protected getManager(user: any, tempJson: any, managerLevel?: any) {
fetch().then((manager: any) => {
tempJson = {
...manager[0],
children: [
...tempJson
]
}
if (user?.Manager.length > 0 && (user?.User.Id !== manager[0].Manager[0].Id)) {
if (managerLevel !== null) {
if (managerLevel <= 1) {
this.setOrgData(tempJson)
return;
}
else {
managerLevel--;
this.getManager(manager[0], [tempJson], managerLevel)
}
}
else {
this.getManager(manager[0], [tempJson], managerLevel)
}
}
else {
this.setOrgData(tempJson)
}
})
}
protected getSelectedUser() {
fetch().then((user: any) => {
this.getAssociates(user);
})
}
protected getAssociates(user: any) {
var tempJson: any;
var managerLevel = this.props.managerLevel;
fetch().then((associates: any) => {
fetch().then((reportees: any) => {
if (reportees.length > 0) {
tempJson = [{
...user[0],
children: [
...reportees
]
}]
}
else {
tempJson = associates;
}
this.getManager(user[0], [...tempJson], managerLevel)
})
})
}
from react-orgchart.
I too have the same problem I just need to show 2 levels of the node by default. Can anyone help me?
from react-orgchart.
I too have the same problem I just need to show 2 levels of the node by default. Can anyone help me?
Provided an example above, you can apply that, set manager level to 2, get it from the props, redux, whatever you want
from react-orgchart.
I have a problem. I need to collapse all other nodes when I expand one node. I'm a beginner, I don't know how to do this. can anyone help me?
from react-orgchart.
I have a problem. I need to collapse all other nodes when I expand one node. I'm a beginner, I don't know how to do this. can anyone help me?
If you can provide a codesandbox example I can help
from react-orgchart.
Related Issues (20)
- react typescript的环境支持 HOT 1
- Direction support for react?
- 可否调整框的大小,感觉有点太宽了,数据很多的时候蔓延的很长
- 关于datasource中子节点展开
- removeNewNode deletes two nodes instead of one
- Drag and drop without children
- Action in Button Expand Node
- From Database
- default collapsed example doesn't work in React version HOT 3
- Canvas Size
- how to props style ?
- React orgchart verticalLevel or verticalDepth
- filter feature ?
- Uncaught SyntaxError: Unexpected token '<' HOT 1
- Manifest: Line: 1, column: 1, Syntax error. HOT 1
- Nexjs & Error importing CSS files within node_modules HOT 1
- images and large org data does not export properly
- Feature Suggestion : Support for Hybrid (vertical + horizontal) layout HOT 1
- 无法正常启动
- Report path with a collapsed attribute?
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 react-orgchart.