OnClick of TreeMapLeaf

[Ankit Bansal]

    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]

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: 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/blazor_onItemclick-908815081 

 

 

Kindly revert us, if you have any concerns. 

 

 

Regards, 

Baby. 

[Sarasilmiya Shahul Hameed]

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]

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, 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1739962804 

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

Regards, 

Baby.