DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.
Tree Map

Drill Down

If you bind a TreeMap to a data source with a hierarchical structure, you can enable drill-down and drill-up functionality:

  • "Drill down" means navigate to a more detailed view.
  • "Drill up" means navigate back up a level.

In this demo, you can click/tap a group of TreeMap tiles to drill down. Once you go down a level, navigation links appear at the top of the TreeMap. Use them to drill back up. To implement this technique, follow the steps below:

  1. Set the interactWithGroup property to true to force the control to hot-track entire groups instead of individual items.

  2. Call the node.drillDown method in the TreeMap onClick handler.

  3. To enable drill-up functionality, generate links in the onDrill handler. Call the node.drillDown method on link clicks. Inspect the code below for implementation details.

Thank you for your interest in our ASP.NET Core product libraries and UI component suite. We are moving ASP.NET Core-related demos and content to Please make sure to update your bookmarks with our new URL.

View Demo