We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

OnClick of TreeMapLeaf


I want to add a onlick event to Tree Map Leaf.

On the click of the leaf I want to display a Div at the bottom of the page ?

Can you please help me with that ?

3 Replies

BP Baby Palanidurai Syncfusion Team October 18, 2019 12:17 PM UTC

Hi Ankit, 
Greetings from Syncfusion. 

We have analyzed your query. Your requirement can be achieved using the onItemClick. If you click the treemap Item, onItemClick event gets fired. You will get the groupIndex value in arguments from this event. Using this groupIndex value, you can check whether the item is a leaf or not. For your reference, we have created the sample using onItemClick event to show TreeMap. Please find the below code snippet to achieve this requirement, 

        <EjsTreeMap TValue="CarSalesDetails" WeightValuePath="Sales" 
            <TreeMapEvents OnItemClick="@click" TValue="CarSalesDetails"></TreeMapEvents> 
            <TreeMapLeafItemSettings LabelPath="Company"> 
                <TreeMapLevel GroupPath="Continent"> 
                    <TreeMapLevelBorder Color="white" Width="0.5"> 
    <div style="display:@display">@company</div> 
@code { 
    public string display = "none"; 
    public string company = "LeafItem"; 
    public void click(IItemClickEventArgs<CarSalesDetails> args) { 
        if (args.GroupIndex != 0) { 
            display = "block"; 
            company = args.GroupName; 
        else { 
            display = "none"; 

Kindly revert us, if you have any concerns. 

SS Sarasilmiya Shahul Hameed Syncfusion Team October 21, 2019 04:40 AM UTC

From: Bansal, Ankit  
Subject: RE: [EXTERNAL] Syncfusion support community forum 148405, OnClick of TreeMapLeaf, has been updated. 
Thanks a lot Sync Fusion Team. 
I works out really well. 
Is there any way in which I can fix the width and height of all tree map leaf node. 
I am not dependent  upon the weight. I just want all the data to be shown in grid manner. 
Here the sizes are automatically adjusted based on the number of the green boxes or orange. 
Here I need fixed width of all the boxes ? 
Thanks & Regards, 
Ankit Bansal


BP Baby Palanidurai Syncfusion Team October 22, 2019 10:59 AM UTC

Hi Ankit, 

Thanks for your update. 

We have analyzed your query. Treemap items size will be rendered based on the weight values only. And then, leaf items will be rendered based on the parent size. For example, if one parent has three-leaf, then the rect will be shared as three parts as based on the corresponding leaf weight value. So, we cannot set the height and width for treemap items explicitly. If you want to render all items at the same size, you can use the same values for all the item’s weight value. Even, if we are using the same weight values, each leaf item will be fit for parent item rect. 

We have prepared a sample with having all the items weight value as 1. Please find the below screenshot for your reference, 

Kindly revert us, if you have any other concerns. We are always happy to assist you. 


Live Chat Icon For mobile
Up arrow icon