Drill Down Support

Treemap enables drill down to expose the hierarchy achieved by clicking on a node and this results in enabling the Treemap to move to the next level or sub level and can return back to the normal Treemap view by clicking on the node header. Only a single level of the Treemap is visible at once.

Enabling Drill Down

Treemap elements can be drilled down by setting the EnableDrillDown property to true. You can view the hierarchy of the Treemap by clicking on the treemap items and can move to the previous level by clicking on the drill down header. The header color can be customized by changing the values in the property DrillDownHeaderColor and the selection color can be done by changing the DrillDownSelectionColor property.

Drill down Properties

Property Type Description
enableDrillDown bool Gets or sets a value that indicates whether the drill down feature is enabled or not
drillDownHeaderColor string Gets or sets a color for header during drill down
drillDownSelectionColor string Gets or sets a color for highlighting tree map item during drill down.
  • cshtml
  • <ej-tree-map id="treemap1" datasource="ViewBag.drillDownData" enable-drill-down="true" drill-down-selection-color="#199DAF" weight-value-path="Population">
    <e-levels>
        <e-level group-path="Continent" header-height="25" group-gap="5" show-labels="true"></e-level>
        <e-level group-path="Country" header-height="25" group-gap="0" show-labels="true"></e-level>
        <e-level group-path="Name" header-height="25" group-gap="0" show-labels="true"></e-level>
    </e-levels>
    </ej-tree-map>

    Before Drill Down

    After Drill Down