Customization

[ryanlaw]

Hi, I am trying to put to a POC by using orgchart, due to the requirement, some of the elements are required to not be accessible. Is there any way we could perform the following: The nodeMenuUI only visible on certain nodes

Thanks

[ryanlaw]

A code sample Sample

The wanted output will look like this:

Only the node (Blair) and its direct child node will able to have the nodeMenuUI visible, the other nodes are not.

Thanks

[ZornitsaPesheva]

Here is a code example: https://code.balkan.app/org-chart-js/disabled-nodemenu#JS

[ryanlaw]

Thanks @ZornitsaPesheva ,

I see the use of "showmenu", is there any way to hide the 3 dots?

Thanks again

[ryanlaw]

Furthermore, the showmenu will be part of the standard export. do we need to make a custom export feature to ignore it? or there is a flag to either stop it from being exported or imported.

[ZornitsaPesheva]

Here is a how to hide node menu button conditionally: https://code.balkan.app/org-chart-js/remove-node-menu#JS You can create another template without nodemenu button and use the exportstart and expotrend event to change the template on export.

[ryanlaw]

Thanks @ZornitsaPesheva,

You are being really helpful.

I am now seeing some challenges with this usage with the tag:

1. Tag can be used as 'group" feature which grouping number of nodes together
2. Tag can be used as menuUI flag to let the library rendering the node menu or not

For the first point, it is needed as when importing/exporting the chart such information is important. For the second point, it is not that important in some cases and it is confusing if the not rendering of the menu UI is based on who is the user looking at the chart.

Are there any other alternatives, that the library would hide the menu UI based via CSS? which a developer would be able to easily control?

Thanks

[ZornitsaPesheva]

What is the condition on which you'd like to hide the node menu button? I.e., on which nodes you'd like to hide the node menu button? I guess it is not only one node and it's children.

[ryanlaw]

Thanks @ZornitsaPesheva for the reply.

A typical use case of the chart will be a manager of a department would able to view the entire chart of his/her organisation but he/she should only be able to modify the employee directly reports to he/she.

Regards

[ZornitsaPesheva]

Can you create an example to show us how do you use tags for these groups?

[ryanlaw]

Hi @ZornitsaPesheva ,

I am working on a code snip to supply here, however, I have noticed some weird behaviour with "document.querySelectorAll".

Will update ASAP.

Regards

[ryanlaw]

Hi @ZornitsaPesheva , The behaviour of the document.querySelectorAll is the NodeList always empty and turns out it requires to use setTimeout.

The requirements are :

1. it doesn't allow users to modify anyone who is not directly under him in the org chart
2. the "..." will not rendered

I have made the 836 Sample which is the closest I could manage to archive but with an issue. The moment I click within the chart (empty area) the "..." will appear

Can you please advise what is the issue here?

Regards

[ZornitsaPesheva]

Who is "him"? How do you know which are these users?

[ryanlaw]

Thanks @ZornitsaPesheva ,

"Him" is the logged-in user currently looking at the org chart. It can be differentiated via its logging detail.

In my code snip provided earlier, User "Rome Sam" is the "him".

Hence, he and anyone above him or anyone at the same level as him in the org chart is not editable. People who are not reporting to him are also not editable. Only the people or people in the group that directly report to him are editable when Rome is looking at the org chart.

Thanks

[ZornitsaPesheva]

I have created a code demo for you on how to add the nodeMenu dynamically: https://code.balkan.app/org-chart-js/change-template-on-init#JS In your case you will need to iterate the passed id and add the node menu for all nodes below.

[ryanlaw]

Thanks @ZornitsaPesheva ,

I see the idea where initially the node comes without a nodemenu, and on initiating we add the node menu to its child nodes.

Let me give it a try and update you.

But do you see the weird behaviour (The moment I click within the chart (empty area) the "..." will appear) I described previously? You can see it in the sample I supplied.

Thanks

[ZornitsaPesheva]

Your way is just not right. You should use our events as in my example.

[ryanlaw]

Thanks for the advice it is now doing what I wanted via the onInit event to assign the node menu UI based on the requirements.

Just one more question about the drag and drop and I have two questions:

1. what exactly the "dragDropMenu" does? I can't seems to trigger it
2. when I dragged the node in 836 I could only either put the node as a child within the group or a child of the group. I am not able to put the node as an individual member of the group. Can you please advise? Thanks

[ZornitsaPesheva]

1. Where did you see that "dragDropMenu"?
2. Here is a code demo on how to drag in a group: https://code.balkan.app/org-chart-js/first-look#JS