Drill Down Icon

8 posts, 0 answers
  1. Sekhar
    Sekhar avatar
    22 posts
    Member since:
    Dec 2013

    Posted 11 Dec 2013 Link to this post

    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?
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 12 Dec 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sekhar
    Sekhar avatar
    22 posts
    Member since:
    Dec 2013

    Posted 12 Dec 2013 Link to this post

    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)
  5. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 17 Dec 2013 Link to this post

    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.
  6. Sekhar
    Sekhar avatar
    22 posts
    Member since:
    Dec 2013

    Posted 17 Dec 2013 Link to this post

    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.
  7. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 19 Dec 2013 Link to this post

    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.
  8. Sekhar
    Sekhar avatar
    22 posts
    Member since:
    Dec 2013

    Posted 19 Dec 2013 Link to this post

    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.
  9. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 23 Dec 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017