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

New Issue

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

claunia commented

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

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/2374
Author: @ace90210
Created: 11/28/2025
Status: ✅ Merged
Merged: 12/9/2025
Merged by: @enchev

Base: master ← Head: dev/bugfix-treeview-checkbox-selection-with-template

📝 Commits (4)

7872946 add click handler for treeviewitem when Template used with checkboxes
5519af8 change approach to expose a toggle option
f581fa4 remove unused method and add select to toggle checkbox selection
0b83b5c rename to toggle checked

📊 Changes

1 file changed (+18 additions, -0 deletions)

View changed files

📝 Radzen.Blazor/RadzenTreeItem.razor.cs (+18 -0)

📄 Description

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.

_{🔄 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/2374 **Author:** [@ace90210](https://github.com/ace90210) **Created:** 11/28/2025 **Status:** ✅ Merged **Merged:** 12/9/2025 **Merged by:** [@enchev](https://github.com/enchev) **Base:** `master` ← **Head:** `dev/bugfix-treeview-checkbox-selection-with-template` --- ### 📝 Commits (4) - [`7872946`](https://github.com/radzenhq/radzen-blazor/commit/7872946d0d8d282729622c2dc6c4187d2e5baa89) add click handler for treeviewitem when Template used with checkboxes - [`5519af8`](https://github.com/radzenhq/radzen-blazor/commit/5519af8a7ecb8774c2eafe09d2a047f615b9b41e) change approach to expose a toggle option - [`f581fa4`](https://github.com/radzenhq/radzen-blazor/commit/f581fa499acb400341c4dcd96c6a718d20294bf9) remove unused method and add select to toggle checkbox selection - [`0b83b5c`](https://github.com/radzenhq/radzen-blazor/commit/0b83b5cf7070af0b14400bfb840ada4c94b99fbc) rename to toggle checked ### 📊 Changes **1 file changed** (+18 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/RadzenTreeItem.razor.cs` (+18 -0) </details> ### 📄 Description 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. --- <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:22:30 +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#3224