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

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!