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!
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.
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
You are welcome @woverla!
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;
}