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: Figure 1: Before DrillDown
Figure 2: After DrillDown
|
This page will automatically be redirected to the sign-in page in 10 seconds.