[PR #487] [CLOSED] LegendClick event in PieSeries #2196

New Issue

claunia · 2026-01-29T18:17:41Z

claunia commented

2026-01-29 18:17:41 +00:00

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/487
Author: @paulo-rico
Created: 6/13/2022
Status: ❌ Closed

Base: master ← Head: playground

📝 Commits (10+)

ca30255 Playground initial commit
60641a7 Code executed in dialog
a28f2df avoid double editor create
b2e2ebe Example source code tab RenderMode set to Client
520e902 code simplified
77a2821 editor creation moved to function
654c5c7 missing using added
f67826d TabRenderMode.Client removed
d2409c6 window.editor set
ed9f9f0 using removed

📊 Changes

7 files changed (+343 additions, -9 deletions)

View changed files

📝 Radzen.Blazor/DropDownBase.cs (+5 -0)
📝 RadzenBlazorDemos/Pages/_Host.cshtml (+16 -0)
📝 RadzenBlazorDemos/RadzenBlazorDemos.csproj (+16 -0)
➕ RadzenBlazorDemos/Services/Compiler.cs (+155 -0)
➕ RadzenBlazorDemos/Services/EmptyRazorProjectFileSystem.cs (+64 -0)
📝 RadzenBlazorDemos/Shared/CodeViewer.razor (+16 -7)
📝 RadzenBlazorDemos/Shared/RadzenExample.razor (+71 -2)

📄 Description

While using a donut chart as both information and as a navigation aid to drill down to a segment's detail, I noticed that with a large variance (e.g. 600 to 1) in the chart data, the clickable area is too small to action. I therefore created a LegendClick event to address this using almost identical code that exists for the SeriesClick Event.

Below is a partial file of the changes made. I will place them in RadzenPieSeries.razor.cs

`using Microsoft.AspNetCore.Components;
using Radzen.Blazor.Rendering;
using System.Threading.Tasks;

namespace Radzen.Blazor
{
///

/// Renders donut series in .
///

/// The type of the series data item.
public partial class RadzenDonutSeries : RadzenPieSeries, IChartDonutSeries
{
///

/// A callback that will be invoked when the user clicks on a legend item.
///

[Parameter]
public EventCallback LegendClick { get; set; }
///
public override RenderFragment RenderLegendItem()
{
return builder =>
{
foreach (var data in Items)
{
builder.OpenComponent(0);
builder.AddAttribute(1, nameof(LegendItem.Text), TooltipTitle(data));
builder.AddAttribute(2, nameof(LegendItem.Class), $"rz-series-item-{Items.IndexOf(data)}");
builder.AddAttribute(3, nameof(LegendItem.MarkerSize), MarkerSize);
builder.AddAttribute(4, nameof(LegendItem.MarkerType), MarkerType);
builder.AddAttribute(5, nameof(LegendItem.Color), PickColor(Items.IndexOf(data), Fills));
builder.AddAttribute(6, nameof(LegendItem.Click), EventCallback.Factory.Create(this, () => OnLegendItemClick(data)));
builder.CloseComponent();
};
};
}
///
private async Task OnLegendItemClick(object data)
{
if(LegendClick.HasDelegate)
{
await InvokeLegendClick(LegendClick, data);
}
}

/// <inheritdoc />
public async Task InvokeLegendClick(EventCallback<SeriesClickEventArgs> handler, object data)
{
  var category = Category(Chart.CategoryScale);

  await handler.InvokeAsync(new SeriesClickEventArgs
  {
    Data = data,
    Title = GetTitle(),
    Category = PropertyAccess.GetValue(data, CategoryProperty),
    Value = PropertyAccess.GetValue(data, ValueProperty),
    Point = new SeriesPoint
    {
      Category = category((TItem)data),
      Value = Value((TItem)data)
    }
  });
}

}
}`

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/487 **Author:** [@paulo-rico](https://github.com/paulo-rico) **Created:** 6/13/2022 **Status:** ❌ Closed **Base:** `master` ← **Head:** `playground` --- ### 📝 Commits (10+) - [`ca30255`](https://github.com/radzenhq/radzen-blazor/commit/ca30255323cfdd838b2893fa867a569b2e464b9d) Playground initial commit - [`60641a7`](https://github.com/radzenhq/radzen-blazor/commit/60641a7d891b840cef8646d52d03322a419bea87) Code executed in dialog - [`a28f2df`](https://github.com/radzenhq/radzen-blazor/commit/a28f2df6099028e182ab4f1f8d2a73b3e3787b41) avoid double editor create - [`b2e2ebe`](https://github.com/radzenhq/radzen-blazor/commit/b2e2ebe7603f069c047dfef30de6f9c7a81fb85e) Example source code tab RenderMode set to Client - [`520e902`](https://github.com/radzenhq/radzen-blazor/commit/520e902ddc28e37f9d604b61c46dc990a9f8a13d) code simplified - [`77a2821`](https://github.com/radzenhq/radzen-blazor/commit/77a2821285680e50988981103391b372a830a2fc) editor creation moved to function - [`654c5c7`](https://github.com/radzenhq/radzen-blazor/commit/654c5c7cf4509a209d539a3bfe8583797f322257) missing using added - [`f67826d`](https://github.com/radzenhq/radzen-blazor/commit/f67826d36bf74545a50b65e0ca12ac8e6b19b1f0) TabRenderMode.Client removed - [`d2409c6`](https://github.com/radzenhq/radzen-blazor/commit/d2409c686508057491137cb1b973836bcee2d718) window.editor set - [`ed9f9f0`](https://github.com/radzenhq/radzen-blazor/commit/ed9f9f0f6724dca4a2244d559da31cf9d0258914) using removed ### 📊 Changes **7 files changed** (+343 additions, -9 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/DropDownBase.cs` (+5 -0) 📝 `RadzenBlazorDemos/Pages/_Host.cshtml` (+16 -0) 📝 `RadzenBlazorDemos/RadzenBlazorDemos.csproj` (+16 -0) ➕ `RadzenBlazorDemos/Services/Compiler.cs` (+155 -0) ➕ `RadzenBlazorDemos/Services/EmptyRazorProjectFileSystem.cs` (+64 -0) 📝 `RadzenBlazorDemos/Shared/CodeViewer.razor` (+16 -7) 📝 `RadzenBlazorDemos/Shared/RadzenExample.razor` (+71 -2) </details> ### 📄 Description While using a donut chart as both information and as a navigation aid to drill down to a segment's detail, I noticed that with a large variance (e.g. 600 to 1) in the chart data, the clickable area is too small to action. I therefore created a LegendClick event to address this using almost identical code that exists for the SeriesClick Event. Below is a partial file of the changes made. I will place them in RadzenPieSeries.razor.cs `using Microsoft.AspNetCore.Components; using Radzen.Blazor.Rendering; using System.Threading.Tasks; namespace Radzen.Blazor { /// <summary> /// Renders donut series in <see cref="RadzenChart" />. /// </summary> /// <typeparam name="TItem">The type of the series data item.</typeparam> public partial class RadzenDonutSeries<TItem> : RadzenPieSeries<TItem>, IChartDonutSeries { /// <summary> /// A callback that will be invoked when the user clicks on a legend item. /// </summary> [Parameter] public EventCallback<SeriesClickEventArgs> LegendClick { get; set; } /// <inheritdoc/> public override RenderFragment RenderLegendItem() { return builder => { foreach (var data in Items) { builder.OpenComponent<LegendItem>(0); builder.AddAttribute(1, nameof(LegendItem.Text), TooltipTitle(data)); builder.AddAttribute(2, nameof(LegendItem.Class), $"rz-series-item-{Items.IndexOf(data)}"); builder.AddAttribute(3, nameof(LegendItem.MarkerSize), MarkerSize); builder.AddAttribute(4, nameof(LegendItem.MarkerType), MarkerType); builder.AddAttribute(5, nameof(LegendItem.Color), PickColor(Items.IndexOf(data), Fills)); builder.AddAttribute(6, nameof(LegendItem.Click), EventCallback.Factory.Create(this, () => OnLegendItemClick(data))); builder.CloseComponent(); }; }; } /// <inheritdoc /> private async Task OnLegendItemClick(object data) { if(LegendClick.HasDelegate) { await InvokeLegendClick(LegendClick, data); } } /// <inheritdoc /> public async Task InvokeLegendClick(EventCallback<SeriesClickEventArgs> handler, object data) { var category = Category(Chart.CategoryScale); await handler.InvokeAsync(new SeriesClickEventArgs { Data = data, Title = GetTitle(), Category = PropertyAccess.GetValue(data, CategoryProperty), Value = PropertyAccess.GetValue(data, ValueProperty), Point = new SeriesPoint { Category = category((TItem)data), Value = Value((TItem)data) } }); } } }` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

claunia added the pull-request label 2026-01-29 18:17:41 +00:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#2196