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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

OnClick of TreeMapLeaf

Thread ID:

Created:

Updated:

Platform:

Replies:

148405 Oct 17,2019 08:51 PM UTC Oct 22,2019 10:59 AM UTC Blazor 3
loading
Tags: TreeMap
Ankit Bansal
Asked On October 17, 2019 08:51 PM UTC

    Hi,

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 ?

Baby Palanidurai [Syncfusion]
Replied On 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, 

<div> 
        <EjsTreeMap TValue="CarSalesDetails" WeightValuePath="Sales" 
                     DataSource="@DataSource"> 
            <TreeMapEvents OnItemClick="@click" TValue="CarSalesDetails"></TreeMapEvents> 
            <TreeMapLeafItemSettings LabelPath="Company"> 
            </TreeMapLeafItemSettings> 
            <TreeMapLevels> 
                <TreeMapLevel GroupPath="Continent"> 
                    <TreeMapLevelBorder Color="white" Width="0.5"> 
                    </TreeMapLevelBorder> 
                </TreeMapLevel> 
            </TreeMapLevels> 
        </EjsTreeMap> 
    </div> 
    <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"; 
        } 
    } 
} 
  

Screenshot: 
 
 
 
Kindly revert us, if you have any concerns. 
 
 
Regards, 
Baby. 


Sarasilmiya Shahul Hameed [Syncfusion]
Replied On 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

 


Baby Palanidurai [Syncfusion]
Replied On 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. 

Regards, 
Baby. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon