We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to achieve DrillDown in ejTreeMap?

Platform: JavaScript |
Control: ejTreeMap |
Published Date: January 21, 2015 |
Last Revised Date: June 28, 2019

The following steps help you meet the requirement.

Step 1:

Create a TreeMap sample and include the necessary script files.

Step 2:

Set enableDrillDown property as True in order to drilldown the TreeMap elements.

HTML

 enableDrillDown: true

You can customize the drilled header color using the drillDownHeaderColor property.

HTML

  drillDownHeaderColor: "#199DAF"

You can refer to the following online documentation link for more details about DrillDown.

http://help.syncfusion.com/ug/js/documents/drilldownsupport.htm

Sample Location for TreeMap-DrillDown:

http://js.syncfusion.com/demos/web/#!/azure/treemap/drilldown

HTML

<script type="text/javascript">
        jQuery(function ($) {
            $("#treemap").ejTreeMap({                   
                   . . .
                enableDrillDown: true,
    drillDownHeaderColor: "#199DAF",
                       . . .
  levels: [
                       . . .
                ]
            });
            });
    </script>

 

Screenshot:

Treemap with drilldown view

Figure 1: Before DrillDown

 

TreeMap after the drill down enabled

Figure 2: After DrillDown

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon