Validators do not work if the component is rendered using RenderTreeBuilder #564

New Issue

claunia · 2026-01-29T17:39:24Z

claunia commented

2026-01-29 17:39:24 +00:00

Originally created by @OndrejUzovic on GitHub (Oct 3, 2022).

If a component is rendered inside a method using RenderTreeBuilder then validators do not work.

E.g. consider the following code in which two text boxes are rendered. The first TextBox is rendered using the markup and the second via the method RenderTextBox using RenderTreeBuilder.

Both text boxes are associated with RequiredValidators.
However when the 'Submit' button is pressed only the validator for the first text box works.

(Note: not only TextBox but also other components e.g. DropDownDataGrid do not work with validators if created using RenderTreeBuilder.)

@page "/"
@using Radzen;
@using Radzen.Blazor;
@using System.Linq.Dynamic.Core;

<div style="width:700px; height:500px; background-color:beige;">
    <RadzenTemplateForm Data="myTemplateFormData" >

        <div class="row" style="margin-top: 3rem;">
            <div class="col-md">
                <RadzenTextBox Name="TextBox1" @bind-Value=@myTextBox1Value Style="display:block;" />
                <RadzenRequiredValidator Component="TextBox1" Style="position:absolute;" />
            </div>
            <div class="col-md">
                @RenderTextBox()
                <RadzenRequiredValidator Component="TextBox2"  Style="position:absolute;" />
            </div>
        </div>

        <RadzenButton Text="Submit" ButtonType="ButtonType.Submit" Style="margin-top: 3rem;" />

    </RadzenTemplateForm>
</div>

@code {
    private string myTemplateFormData = "hello";
    private string myTextBox1Value;
    private string myTextBox2Value;
    
    private RenderFragment RenderTextBox()
    {
        RenderFragment result = x =>
        {
            int i = 0;

            x.OpenComponent<RadzenTextBox>(i++);

            x.AddAttribute(i++, nameof(RadzenTextBox.Name), "TextBox2");
            x.AddAttribute(i++, nameof(RadzenTextBox.Style), "display:block;");

            // bind-value
            x.AddAttribute(i++, nameof(RadzenTextBox.Value), myTextBox2Value);
            x.AddAttribute(i++, nameof(RadzenTextBox.ValueChanged), new EventCallbackFactory().Create<string>(this, value => myTextBox2Value = value));

            x.CloseComponent();
        };

        return result;
    }
}

Originally created by @OndrejUzovic on GitHub (Oct 3, 2022). If a component is rendered inside a method using RenderTreeBuilder then validators do not work. E.g. consider the following code in which two text boxes are rendered. The first TextBox is rendered using the markup and the second via the method `RenderTextBox` using RenderTreeBuilder. Both text boxes are associated with RequiredValidators. However when the 'Submit' button is pressed only the validator for the first text box works. (Note: not only TextBox but also other components e.g. DropDownDataGrid do not work with validators if created using RenderTreeBuilder.) ![image](https://user-images.githubusercontent.com/55758368/193588919-34b064f4-c964-439d-b31d-c989da09429f.png) ``` @page "/" @using Radzen; @using Radzen.Blazor; @using System.Linq.Dynamic.Core; <div style="width:700px; height:500px; background-color:beige;"> <RadzenTemplateForm Data="myTemplateFormData" > <div class="row" style="margin-top: 3rem;"> <div class="col-md"> <RadzenTextBox Name="TextBox1" @bind-Value=@myTextBox1Value Style="display:block;" /> <RadzenRequiredValidator Component="TextBox1" Style="position:absolute;" /> </div> <div class="col-md"> @RenderTextBox() <RadzenRequiredValidator Component="TextBox2" Style="position:absolute;" /> </div> </div> <RadzenButton Text="Submit" ButtonType="ButtonType.Submit" Style="margin-top: 3rem;" /> </RadzenTemplateForm> </div> @code { private string myTemplateFormData = "hello"; private string myTextBox1Value; private string myTextBox2Value; private RenderFragment RenderTextBox() { RenderFragment result = x => { int i = 0; x.OpenComponent<RadzenTextBox>(i++); x.AddAttribute(i++, nameof(RadzenTextBox.Name), "TextBox2"); x.AddAttribute(i++, nameof(RadzenTextBox.Style), "display:block;"); // bind-value x.AddAttribute(i++, nameof(RadzenTextBox.Value), myTextBox2Value); x.AddAttribute(i++, nameof(RadzenTextBox.ValueChanged), new EventCallbackFactory().Create<string>(this, value => myTextBox2Value = value)); x.CloseComponent(); }; return result; } } ```

claunia closed this issue

2026-01-29 17:39:24 +00:00

claunia commented

2026-01-29 17:39:25 +00:00

@enchev commented on GitHub (Oct 3, 2022):

Hey @OndrejUzovic,

This is not proper code for @bind-Value:

// bind-value
x.AddAttribute(i++, nameof(RadzenTextBox.Value), myTextBox2Value);
x.AddAttribute(i++, nameof(RadzenTextBox.ValueChanged), new EventCallbackFactory().Create<string>(this, value => myTextBox2Value = value));

you are missing:

x.AddAttribute(i++, "ValueExpression", global::Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Linq.Expressions.Expression<System.Func<System.String>>>(() => myTextBox2Value));

@enchev commented on GitHub (Oct 3, 2022): Hey @OndrejUzovic, This is not proper code for `@bind-Value`: ``` // bind-value x.AddAttribute(i++, nameof(RadzenTextBox.Value), myTextBox2Value); x.AddAttribute(i++, nameof(RadzenTextBox.ValueChanged), new EventCallbackFactory().Create<string>(this, value => myTextBox2Value = value)); ``` you are missing: ``` x.AddAttribute(i++, "ValueExpression", global::Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Linq.Expressions.Expression<System.Func<System.String>>>(() => myTextBox2Value)); ``` ![image](https://user-images.githubusercontent.com/5804953/193599931-704d52a4-a207-4553-a4df-001363d9a0bc.png) ![image](https://user-images.githubusercontent.com/5804953/193599983-a6e25cbf-071e-41ab-b86a-740e00cfdd02.png)

claunia commented

2026-01-29 17:39:25 +00:00

@OndrejUzovic commented on GitHub (Oct 3, 2022):

@enchev Thank you very much for the prompt and very helpful support!

@OndrejUzovic commented on GitHub (Oct 3, 2022): @enchev Thank you very much for the prompt and very helpful support!

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#564