Disable Drill here if no Subordinates

Org Chart
1

Is it possible to hide the "Drill Here" icon if the employee has no subordinates? I tried to take the approach of custom java to determine if the box had children and then appending a css class to DrillHere. Then hide the icon in custom CSS. I am having issues, however, with the java. I think I have the CSS figured out.

Java I Tried (From this post)

renderer.onBoxRendered(function(event, box, itemData){
var itemWrap = box.$elem.closest(".poch-item-wrap");

if(!itemWrap.hasClass("poch-with-subordinates"))
{
    box.$elem.addClass("custom-class");
}

});

CSS

.custom-class .rocToolbar .rocToolbarButton.rocActionDrillHere{
display: none;
}

Any Help would be much appreciated!

2

This is a solution for Org Chart 3. Check the reply for Org Chart 4 below.

Hi @woverla,

Your script and CSS is almost correct. I adjusted it a bit.

Custom JavaScript:

renderer.onBoxRendered(function(event, box, itemData){
  var itemWrap = box.$elem.closest(".poch-item-wrap");

  if(!itemWrap.hasClass("poch-with-subordinates"))
  {
  	box.$elemContainer.addClass("custom-class");
  }

});

Custom CSS:

.poch-level-0 .custom-class .poch-toolbar{
	display: none;
}

For custom JavaScript, I replaced box.$elem by box.$elemContainer because the drill down menu is in the parent container.

For custom CSS I added .poch-level-0 to guarantee that menu is hidden only if an employee is displayed as a child, not root box. I also hide the whole menu instead of a single button. Otherwise, the button will be hidden, but the menu border will persist.

3

Thank you very much! That worked like a charm. Thank you also for the explanation of what I missed in the code. That was very helpful.

1 Like
4

You are welcome @woverla!

5

Update for Org Chart 4.

The code snippet for the Custom JavaScript step:

api.onBoxRendered((box, itemData) => {
    let itemWrap = $(box.elem).closest(".poch-group-item");
    if (!itemWrap.hasClass("poch-group-item_with-subordinates")) {
        $(box.elem).addClass("custom-class");
    }
});

Since the HTML structure changed, the box.elem is used instead of the box.elemContainer.

The custom CSS remains the same:

.poch-level-0 .custom-class .poch-toolbar{
	display: none;
}