This is a migrated thread and some comments may be shown as answers.

Drill Down Icon

7 Answers 161 Views
OrgChart
This is a migrated thread and some comments may be shown as answers.
Sekhar
Top achievements
Rank 1
Sekhar asked on 11 Dec 2013, 05:03 PM
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?

7 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 12 Dec 2013, 11:24 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Sekhar
Top achievements
Rank 1
answered on 12 Dec 2013, 02:40 PM
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)
0
Plamen
Telerik team
answered on 17 Dec 2013, 01:00 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Sekhar
Top achievements
Rank 1
answered on 17 Dec 2013, 06:44 PM
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.
0
Plamen
Telerik team
answered on 19 Dec 2013, 01:47 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Sekhar
Top achievements
Rank 1
answered on 19 Dec 2013, 04:03 PM
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.
0
Plamen
Telerik team
answered on 23 Dec 2013, 06:28 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
OrgChart
Asked by
Sekhar
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Sekhar
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or