Posted 22 August 2021, 11:19 pm EST
Is there a way to create a click action on the items in the treemap component.Best Regards
Emil
Treemap Click action
Posted by: ehh on 22 August 2021, 11:19 pm EST
-
ehh
Best Regards
Emil -
manish.gupta
Replied 24 August 2021, 3:31 pm EST
Hi,
You may use the SelectionChanged event to get the currently selected dataPoint. Please refer to the following code snippet for reference.<TreeMap @ref="map" Class="chart" ItemsSource="Data" Binding="Sales" BindingName="Category" ChildItemsPath="Items" Tooltip="{value}" SelectionMode="ChartSelectionMode.Point" >
<Label>
<DataLabel Content="{name}" />
</Label>
</TreeMap>
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
map.SelectionChanged += SelectionChanged;
}
}
protected void SelectionChanged (object sender, EventArgs args)
{
TreeMap _map = (TreeMap)sender;
//param.Context = "D";
}
If you are still looking for the clicking event, you may wrap the control with div and handle using the JS code. If you may elaborate on your requirement, we may suggest you accordingly.
Regards,
Manish Gupta -
ehh
Replied 26 August 2021, 5:26 pm EST
Hello Manish,
I cant seem to get your example working.
I need to be able to click on a specific part of the treemap. And select the item from the treemap data.
I have attached the code i use for my treemap, with the example you made.@using C1.Chart;
@using C1.DataCollection;
@using C1.Blazor.Chart;
@using C1.Blazor.Input;
<TreeMap @ref="map" Class="c1height" ItemsSource="Data" Binding="Amount" BindingName="Cat" SelectionMode="ChartSelectionMode.Point" ChildItemsPath="Items" Style="@("height:100%;max-height:100%;")"
Tooltip="{value:N0}" Palette="Palette.Custom" CustomPalette="GeneralConstants.CustomPalette" LegendPosition="Position.None">
<Label>
<DataLabel Position="LabelPosition.Center" Content="{name}" />
</Label>
</TreeMap>
@code {
[Parameter]
public Tile Tile { get; set; }
[Parameter]
public TileData TileData { get; set; }
TreeMap map;
List<TreeMapItem> Data { get; set; }
protected override async Task OnInitializedAsync()
{
Data = TreeMapItem.GetData(TileData);
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
map.SelectionChanged += SelectionChanged;
}
}
protected void SelectionChanged(object sender, EventArgs args)
{
TreeMap _map = (TreeMap)sender;
//param.Context = "D";
}
class TreeMapItem
{
public string Cat { get; set; }
public double Amount { get; set; }
public List<TreeMapItem> Items { get; set; }
public static List<TreeMapItem> GetData(TileData tileData)
{
var data = new List<TreeMapItem>();
TreeMapItem item = new TreeMapItem();
for (int i = tileData.Columns; i < tileData.Cells.Count() - tileData.Columns; i++)
{
if (i == tileData.Columns)
{
item = new TreeMapItem { Cat = tileData.Cells.ElementAt(i).V.ToString(), Items = new List<TreeMapItem>() };
item.Items.Add(new TreeMapItem { Cat = tileData.Cells.ElementAt(++i).V.ToString(), Amount = Convert.ToDouble(tileData.Cells.ElementAt(++i).V) });
}
else
{
if (item.Cat != tileData.Cells.ElementAt(i).V.ToString())
{
data.Add(item);
item = new TreeMapItem { Cat = tileData.Cells.ElementAt(i).V.ToString(), Items = new List<TreeMapItem>() };
item.Items.Add(new TreeMapItem { Cat = tileData.Cells.ElementAt(++i).V.ToString(), Amount = Convert.ToDouble(tileData.Cells.ElementAt(++i).V) });
}
else
{
item.Items.Add(new TreeMapItem { Cat = tileData.Cells.ElementAt(++i).V.ToString(), Amount = Convert.ToDouble(tileData.Cells.ElementAt(++i).V) });
}
}
}
data.Add(item);
return data;
}
} -
manish.gupta
Replied 26 August 2021, 7:57 pm EST
Hi,
Please find the attached working sample for you. If the issue persists, please elaborate so that we may assist you accordingly.
Regards,
Manish Gupta
TreeMap_selectionChanged.zip -
ehh
Replied 26 August 2021, 10:10 pm EST
Hi,
Thanks for the demo, it does exactly what I need, but i cant seem to get it working in blazor server, i have tired creating a blank project and importing your example.
The project is attached.
WebApplication3.zip -
ashwin.saxena
Replied 30 August 2021, 4:47 pm EST
Hi,
I ran your project and it worked without any issues. The only issue I faced, was in the NuGet package. The correct packages were not added to the project. Before running the project, I added these two packages:
1. C1.Blazor.Core
2. C1.Blazor.Chart
And after this, the project worked as expected.
Please try installing these two packages at your end too. And let me know if the issue was something else. I am attaching the updated project with the NuGet packages.
TreeMap_Click.zip -
ehh
Replied 30 August 2021, 5:38 pm EST
Hello Ashwin,
I can see that I for some reason didnt get the nugets applied to the project I sent.
I have now tried downloading your updated version, and I still have the same problem. Everything loads fine and I get no errors, but when I click nothing happens. The webassembly project Manish posted is working fine. Please let me know what information you need to troubleshoot. I have attached a picture of the treemap on my end.
Best regards
Emil
-
dushyant.sharma
Replied 31 August 2021, 7:13 pm EST
Hi,
We were not able to replicate the issue at our end. We added the following NuGet packages to your project:
1. C1.Blazor.Core
2. C1.Blazor.Chart
The project is working as expected at our end. You may try debugging it, setting breakpoints to check whether the event is being fired or not.
Furthermore, if possible, Kindly share the build and environment details so that we could replicate the issue and reply accordingly.
Kindly refer to the attached sample below.
Regards
Dushyant Sharma
TreeMap.zip -
ehh
Replied 31 August 2021, 10:20 pm EST
Hello Dushyant,
I am developing on Visual studio community version 16.11.1. And debugging in IIS Express, running on Windows 10 Version 20H2. Im from Denmark so I use the DA-DK format (This has created problems with some other charts). I have also tried running the project on a different setup, resulting in the same problem.
I have submitted a image showing my setup running the Server version and the Webassembly version. (Server left side, Webassembly right side). With the Webassembly working as intended. The Webassembly project is the one posted by Manish, and the Server project is the one posted by Dushyant.
Let me know if you need anything else.
Best Regards,
Emil
-
dushyant.sharma
Replied 1 September 2021, 9:24 pm EST
Hi,
Thank you for sharing the information, we were able to replicate the issue which was arising due to the change in culture and have forward this to the concerned team with internal tracking id C1-3558.
We will let you know, once we get an update on this. In the meantime, as a workaround, you may set the culture to en, and after this, the project should work as expected.
Please refer to the sample below.
Regards
Dushyant Sharma
TreeMap_.zip -
manish.gupta
Replied 19 February 2022, 7:00 pm EST
Hi,
This issue has been fixed in the latest 2021v3 release. Please check after upgrading to the latest build.
Regards,
Manish Gupta
