How to customize the header in drill-down
You can customize the header template to show the population of a particular country or continent on tree map drill-down.
To customize the header for tree map drill-down, follow the given steps:
Step 1: Initialize the tree map and enable the drill-down option.
$("#treemap").ejTreeMap({ dataSource: population_data, enableDrillDown: true, headerTemplateRendering: ‘headerTemplateRendering’, . . . . . . // Add more codes }); |
Step 2: Customize the header template to show the population of a particular continent and skip the 0th level header in the tree map headerTemplateRendering event. This event occurs when the header template is rendered.
function headerTemplateRendering(sender) { if (sender.headerItem.drilldownHeaders) { var length = sender.childItems.length; population = 0; for (var i = 0; i < length; i++) { population = population + sender.childItems[i].Population; } for (var j = 0; j < sender.headerItem.drilldownHeaders.length; j++) { if (j == 0) { sender.headerItem.originalHeaders[j] = ''; sender.headerItem.drilldownHeaders[j] = ''; } if (j == sender.headerItem.drilldownHeaders.length - 1) { sender.headerItem.drilldownHeaders[j] =(sender.groupingLevel == 0) ? '' : (sender.headerItem.originalHeaders[j] + " - Population : " + population.toLocaleString()); } else sender.headerItem.drilldownHeaders[j] = sender.headerItem.originalHeaders[j]; } } } |
Step 3: After customized the header in tree map drill-down headerTemplateRendering event, you can also customize the DOM element of header inner text in this event.
drillDownItemSelected: function(args) { var headerElement = document.getElementsByClassName('e-drilldownHeader')[0]; if(headerElement.children.length > 0) { var index = headerElement.children[1].innerText.indexOf('.'); var length = headerElement.children[1].innerText.length; headerElement.children[1].innerText = index > -1 ? headerElement.children[1].innerText.slice(index + 1, length) : headerElement.children[1].innerText; } } |
Sample link: https://jsplayground.syncfusion.com/ypgntbr2
