Drill Down Support

20 Jun 20181 minute to read

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

@(Html.EJ().TreeMap("treemap")

		.DataSource(datasource)

		.EnableDrillDown(true)   

		.DrillDownHeaderColor("#199DAF")

		.DrillDownSelectionColor("#199DAF")

		.WeightValuePath("Population")

		.Levels(lv =>

		{

			lv.GroupPath("Continent")                                    

			  .HeaderHeight(25)

			  .GroupGap(5)

			  .ShowLabels(true).Add();

			lv.GroupPath("Country")                                    

			  .HeaderHeight(25)

			  .GroupGap(0)

			  .ShowLabels(true).Add();

			lv.GroupPath("Name")                                   

			  .HeaderHeight(25)

			  .GroupGap(0)

			  .ShowLabels(true).Add();

		})

	)

Before Drill Down

After Drill Down