Level / Depth When First Show

[erbaafidotama]

Hayy, thanks to created react version. I have problem, how to set level or depth my org chart? I have 10 level, but i just want to show 3 level then i can expand manual.

Sorry for my bad english. Thanks.

[orcuncelik]

Can you figure it out?

[erbaafidotama]

Not yet. I dont know how.

[MudulOzan]

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

[erbaafidotama]

For jquery version, can using visibleLevel. How about react version?

[MudulOzan]

I had to handle it myself, I send a prop called manager level and when getting managers I added index as manager level

[erbaafidotama]

I still cant solving this problem. Any body can help?

[MudulOzan]

@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

[erbaafidotama]

@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.

[MudulOzan]

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)
        })
    })
}

[NandhiniShiva]

I too have the same problem I just need to show 2 levels of the node by default. Can anyone help me?

[MudulOzan]

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

[NandhiniShiva]

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?

[MudulOzan]

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