[PR #2374] Fix: TreeItem Template click does not toggle Checkbox #3229

New Issue

claunia · 2026-01-29T18:22:31Z

claunia commented

2026-01-29 18:22:31 +00:00

Original Pull Request: https://github.com/radzenhq/radzen-blazor/pull/2374

State: closed
Merged: Yes

Here is a professional PR description template formatted with Markdown, ready to be pasted into GitHub.

Fix: TreeItem Template click does not toggle Checkbox

Summary

This PR fixes an inconsistency in the RadzenTreeItem component where clicking the content of a custom Template fails to toggle the associated checkbox, whereas clicking default Text works as expected.

The Issue

When AllowCheckBoxes="true", the default rendering logic wraps the item text in a <label for="...">. This leverages native HTML behavior to toggle the checkbox when the text is clicked.

However, when a <Template> is provided, the content is wrapped in a standard <div>. As a result, clicking the template content triggers the Selection (highlight) event via event bubbling, but fails to trigger the Checked state change. This creates a confusing UX where the user expects the checkbox to toggle upon clicking the row, but it does not.

The Fix

I have updated RadzenTreeItem.razor and RadzenTreeItem.razor.cs to programmatically handle the toggle logic when a Template is clicked.

Semantics Preserved: Kept the Template container as a <div> (rather than changing it to a <label>) to ensure valid HTML semantics, as custom templates may contain interactive elements (buttons, inputs) which are illegal inside a label.
Event Handler: Added a protected OnTemplateClick method that checks if AllowCheckBoxes is true and toggles the CheckedChange state.
Binding: Attached @onclick="OnTemplateClick" to the template wrapper div.

Technical Changes

RadzenTreeItem.razor.cs
Added handler logic:

protected async Task OnTemplateClick(MouseEventArgs args)
{
    if (Tree != null && Tree.AllowCheckBoxes && Checkable)
    {
        var currentValue = IsChecked();
        await CheckedChange(currentValue == true ? false : true);
    }
}

RadzenTreeItem.razor
Updated markup to attach the handler:

@if (Template != null)
{
    <div class=@LabelClass @onkeydown:stopPropagation @onclick="@OnTemplateClick">
        @Template(this)
    </div>
}

Reproduction Steps

Create a RadzenTree with AllowCheckBoxes="true".
Define a <Template> for RadzenTreeLevel.
Run the application and click the text/content inside the tree item (not the checkbox itself).
Before Fix: The item is Selected (highlighted blue), but the Checkbox remains unchanged.
After Fix: The item is Selected and the Checkbox toggles state.

Checklist

Changes tested locally.
Verified that Context Menus still function correctly.
Verified that Selection (blue highlight) still functions correctly via event bubbling.

**Original Pull Request:** https://github.com/radzenhq/radzen-blazor/pull/2374 **State:** closed **Merged:** Yes --- Here is a professional PR description template formatted with Markdown, ready to be pasted into GitHub. ----- # Fix: TreeItem Template click does not toggle Checkbox ## Summary This PR fixes an inconsistency in the `RadzenTreeItem` component where clicking the content of a custom `Template` fails to toggle the associated checkbox, whereas clicking default `Text` works as expected. ## The Issue When `AllowCheckBoxes="true"`, the default rendering logic wraps the item text in a `<label for="...">`. This leverages native HTML behavior to toggle the checkbox when the text is clicked. However, when a `<Template>` is provided, the content is wrapped in a standard `<div>`. As a result, clicking the template content triggers the **Selection** (highlight) event via event bubbling, but fails to trigger the **Checked** state change. This creates a confusing UX where the user expects the checkbox to toggle upon clicking the row, but it does not. ## The Fix I have updated `RadzenTreeItem.razor` and `RadzenTreeItem.razor.cs` to programmatically handle the toggle logic when a Template is clicked. 1. **Semantics Preserved:** Kept the Template container as a `<div>` (rather than changing it to a `<label>`) to ensure valid HTML semantics, as custom templates may contain interactive elements (buttons, inputs) which are illegal inside a label. 2. **Event Handler:** Added a protected `OnTemplateClick` method that checks if `AllowCheckBoxes` is true and toggles the `CheckedChange` state. 3. **Binding:** Attached `@onclick="OnTemplateClick"` to the template wrapper `div`. ## Technical Changes **RadzenTreeItem.razor.cs** Added handler logic: ```csharp protected async Task OnTemplateClick(MouseEventArgs args) { if (Tree != null && Tree.AllowCheckBoxes && Checkable) { var currentValue = IsChecked(); await CheckedChange(currentValue == true ? false : true); } } ``` **RadzenTreeItem.razor** Updated markup to attach the handler: ```razor @if (Template != null) { <div class=@LabelClass @onkeydown:stopPropagation @onclick="@OnTemplateClick"> @Template(this) </div> } ``` ## Reproduction Steps 1. Create a `RadzenTree` with `AllowCheckBoxes="true"`. 2. Define a `<Template>` for `RadzenTreeLevel`. 3. Run the application and click the text/content inside the tree item (not the checkbox itself). 4. **Before Fix:** The item is Selected (highlighted blue), but the Checkbox remains unchanged. 5. **After Fix:** The item is Selected *and* the Checkbox toggles state. ## Checklist - [x] Changes tested locally. - [x] Verified that Context Menus still function correctly. - [x] Verified that Selection (blue highlight) still functions correctly via event bubbling.

claunia added the pull-request label 2026-01-29 18:22:31 +00:00

claunia closed this issue

2026-01-29 18:22:31 +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#3229