How to achieve DrillDown in ejTreeMap?

4 mins read

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

Did you find this information helpful?

Yes

Comments (0)

How to achieve DrillDown in ejTreeMap?

Access denied