Drill Down Icon

[Sekhar]

Hi,

I want the drill down icon to be positioned on the middle of the orgchart node and visible all the time instead of displaying it on onhover. How to achieve this?

[Magdalena]

Hello Sekhar,

Thank you for contacting Telerik support.

It is not possible to make drill-down icons always visible, because there is used one DOM element to displaying drill-down icons for all items and it only change its position by inbuilt JavaScript depending on what item is hovered.

To center the icon, please try to apply the following CSS code snippet to your project

.rocToolbar {
    margin-left: 97px;
}

Do not hesitate to contact me if you have other questions.

Regards,
Magdalena
Telerik

[Sekhar]

Thank you Magdalena . w.r.t to the drill down icon can we atleast make it not visible if there are no reportees to a particular person (or node)

[Plamen]

Hello,

You could prevent showing of the drill down icons on some nodes by overriding the default showToolbar event of RadOrgChart as for example in the code below:

<script type="text/javascript">
          var $ = $telerik.$;

          Telerik.Web.UI.RadOrgChart.prototype._showToolbar = function (e) {
              this._resetToolbarVisibility();

              var $element = $(e.currentTarget),
                  offset = $element.offset(),
                  node = $element.parents(".rocNode")[0],
                  $node = $(node),
                  isDrillRootNode = $node.hasClass("rocDrillDownNode"),
                  isRootNode = !isDrillRootNode && $node.hasClass("rocRootNode");
              var customlogic = true;
              if (customlogic) {
                  return;
              }
              else if (isRootNode) {
                  return;
              }
              else if (isDrillRootNode) {
                  $(this._toolbar.goToParentButton.parentNode).removeClass("rocHidden");
                  $(this._toolbar.goToRootButton.parentNode).removeClass("rocHidden");
              }
              else {
                  $(this._toolbar.drillHereButton.parentNode).removeClass("rocHidden");

              }

              this._toolbar.style.left = offset.left + "px";
              this._toolbar.style.top = (offset.top - $(this._toolbar).outerHeight() - 2) + "px";
              this._toolbar.style.display = "block";
              var nodeObject = this._extractNodeFromDomElement(e.target)

              this._toolbar.currentNodeHierarchicalIndex = nodeObject._getHierarchicalIndex();

              window.clearTimeout(this._hideToolbarTimeOut);
          };

      </script>

Hope this information will be helpful.

Regards,
Plamen
Telerik

[Sekhar]

Thank you Plamen for the code. I was able to hide the drilldown but i still see a small square image when i hove on the node. 

Also i am not able to hide the go to root and go to parent buttons on a node.

[Plamen]

Hello,

Would you please elaborate may be with an image or some video what exactly are you seeing because  I could not observe anything unusual tat my side?

Regards,
Plamen
Telerik

[Sekhar]

Hi Plamen,

I have attached the two images before hiding the drilldown and after hiding the drill down. I was hiding the drill down with this script

 $(".rocActionDrillHere").addClass("rocHidden");

As you can see in the afterhidden image, when i hover over the node i see a small square.

[Plamen]

Hi Sekhar,

It looks like I could not explain properly. I am attaching a sample code where is shown how we recommend not showing the drill down buttons for some node. In the sample attached the drill down icons are not shown when hovering the "System" node.

Hope this will be helpful.

Regards,
Plamen
Telerik