# Validation on Dynamic DataGrid

**URL:** <https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914>\
**Category:** Radzen.Blazor Components\
**Created:** [March 11, 2025, 12:44pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914 "2025-03-11T12:44:27Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Francesco.P](https://forum.radzen.com/user_avatar/forum.radzen.com/francesco.p/32/20909_2.png) [@Francesco.P](https://forum.radzen.com/u/Francesco.P)\
**Post date:** [March 11, 2025, 12:44pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/1 "2025-03-11T12:44:28Z")

</div>

Hi,

I was not sure if I had to create a separate topic for this question, or continue with this existing topic [Inline editing on dynamic grid](http://forum.radzen.com/t/inline-editing-on-dynamic-grid/11928/5) (that is one step before what I try to achieve) so I hope I made the good choice by creating one.

Basically, I have to work with dynamic data grids and I'm trying to bring as much features as possible.  
I managed to make my dynamic datagrid work with inline editing thanks to the mentioned topic, but now I'm trying to add validation during edition/creation.  
If I take back the example above, I would like for example to have a RadzenRequiredValidator on the firstname & lastname fields, to make sure that it's not empty while editing and existing row or creating a new row, but I can't figure out how to bind my validator to my component(RadzenTextBox) as it have dynamic names.

Thanks in advance for the help 🙂

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [March 11, 2025, 12:46pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/2 "2025-03-11T12:46:52Z")

</div>

> [@Francesco.P](#):
>
> how to bind my validator to my component(RadzenTextBox) as it have dynamic names.

The "binding" is specifying the component name as Component property:

 ![image](https://forum.radzen.com/uploads/default/original/3X/1/7/17ce0ed3fab47af6b0e4c00a65342ef96256689b.png)

---

<div class="post-metadata">

**Author:** ![Francesco.P](https://forum.radzen.com/user_avatar/forum.radzen.com/francesco.p/32/20909_2.png) [@Francesco.P](https://forum.radzen.com/u/Francesco.P)\
**Post date:** [March 11, 2025, 1:47pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/3 "2025-03-11T13:47:08Z")

</div>

Yes but in this case the name is dynamic.

I tried to set it like this for example, but it's just reacting the same way as if there was no validator, so I guess I'm doing it wrong:

```auto
<EditTemplate>
     <RadzenTextBox Name=@context[@column.Key].ToString() Value=@context[@column.Key].ToString() Change=@(value => @context[@column.Key] = value) />
     <RadzenRequiredValidator Component=@context[@column.Key].ToString() Popup="true" Text="This column is mandatory." />    
</EditTemplate>

```

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [March 11, 2025, 1:49pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/4 "2025-03-11T13:49:54Z")

</div>

> [@Francesco.P](#):
>
> `context[@column.Key].ToString()`

That expression will retrieve value - maybe you can use this column name simply.

---

<div class="post-metadata">

**Author:** ![Francesco.P](https://forum.radzen.com/user_avatar/forum.radzen.com/francesco.p/32/20909_2.png) [@Francesco.P](https://forum.radzen.com/u/Francesco.P)\
**Post date:** [March 11, 2025, 1:56pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/5 "2025-03-11T13:56:23Z")

</div>

That's also something I tried but the behavior stays the same:

```auto
<EditTemplate>
     <RadzenTextBox Name=@column.Key Value=@context[@column.Key].ToString() Change=@(value => @context[@column.Key] = value) />
     <RadzenRequiredValidator Component=@column.Key Popup="true" Text="This column is mandatory." />    
</EditTemplate>

```

I also tried to hardcode the Name/Component by checking the column name directly in a "if" condition but it still does not work.

```auto
if (column.Key.Equals("MyKeyColumn"))
{
    <RadzenTextBox Name="key" Value=@context[column.Key].ToString() style="width: 100%" Change=@(value => context[column.Key] = value) />
    <RadzenRequiredValidator Component="key" Popup="true" Text="This column is mandatory." />
}

```

---

<div class="post-metadata">

**Author:** ![GodzSky](https://forum.radzen.com/user_avatar/forum.radzen.com/godzsky/32/10735_2.png) [@GodzSky](https://forum.radzen.com/u/GodzSky)\
**Post date:** [March 11, 2025, 2:05pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/6 "2025-03-11T14:05:31Z")

</div>

As far as i remember radzen validators works only with @bind-Value but i can be wrong.

Edit;  
I found a mention about this here:

> [@Inline Editing on Dynamic Grid](http://forum.radzen.com/t/inline-editing-on-dynamic-grid/11928/2):
>
> Validation won't work in this case though. Also full disclosure - I haven't tested that.

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [March 11, 2025, 2:07pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/7 "2025-03-11T14:07:56Z")

</div>

Ah good catch @GodzSky! I've completely forgot about that - @bind-Value cannot work with complex expressions.

---

<div class="post-metadata">

**Author:** ![Francesco.P](https://forum.radzen.com/user_avatar/forum.radzen.com/francesco.p/32/20909_2.png) [@Francesco.P](https://forum.radzen.com/u/Francesco.P)\
**Post date:** [March 11, 2025, 2:57pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/8 "2025-03-11T14:57:02Z")

</div>

Does this mean that validation is not possible with dynamic datagrid?

Or it can be done if I change the expression of "Value" to work with "@bind-Value"? If it's the case can someone help with the syntax? I don't know how this should be defined.

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [March 11, 2025, 3:44pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/9 "2025-03-11T15:44:30Z")

</div>

In my opinion you can create custom component with a Value property, define this component in the EditTemplate and set the Value property and in the custom component itself you can use two way bind-Value binding.

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [March 12, 2025, 7:59am UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/10 "2025-03-12T07:59:35Z")

</div>

Here is an example:

 ![image](https://forum.radzen.com/uploads/default/original/3X/f/c/fc65c0be9aa74e81977bb30d2053238d6d63a685.png)

```auto
<RadzenDataGrid @ref=grid @bind-Value=@selectedItems Data="@data" TItem="IDictionary<string, object>" ColumnWidth="200px"
AllowFiltering="true" FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterMode="FilterMode.Advanced" AllowPaging="true" AllowSorting="true">
    <Columns>
        @foreach (var column in columns)
        {
            <RadzenDataGridColumn @key=@column.Key Title="@column.Key" Type="column.Value"
            Property="@PropertyAccess.GetDynamicPropertyExpression(column.Key, column.Value)">
                <Template>
                    @context[@column.Key]
                </Template>
                <EditTemplate>
                    <DataGridDynamicDataEditComponent Name="@column.Key" Value="@($"{context[@column.Key]}")" />
                </EditTemplate>
            </RadzenDataGridColumn>
        }

        <RadzenDataGridColumn Width="100px" Context="data" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
            <Template Context="data">
                <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="rz-my-1 rz-ms-1" Click="@(args => EditRow(data))" @onclick:stopPropagation="true" />
            </Template>
            <EditTemplate Context="data">
                <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(data))" aria-label="Save" />
                <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="rz-my-1 rz-ms-1" Click="@((args) => CancelEdit(data))" aria-label="Cancel" />
            </EditTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

@code {
    RadzenDataGrid<IDictionary<string, object>> grid;

    IList<IDictionary<string, object>> selectedItems;

    public IEnumerable<IDictionary<string, object>> data { get; set; }

    public IDictionary<string, Type> columns { get; set; }

    public enum EnumTest
    {
        EnumValue1,
        EnumValue2
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        columns = new Dictionary<string, Type>()
        {
            { "Employee ID", typeof(int?) },
            { "MyColumn", typeof(EnumTest?) },
            { "FirstName", typeof(string) },
            { "LastName", typeof(string) },
            { "HireDate", typeof(DateTime?) },
            { "DateOnly", typeof(DateOnly?) },
            { "TimeOnly", typeof(TimeOnly?) },
            { "UID", typeof(Guid?) },
        };

        foreach (var i in Enumerable.Range(0, 50))
        {
            columns.Add($"Column{i}", typeof(string));
        }

        data = Enumerable.Range(0, 100).Select(i =>
        {
            var row = new Dictionary<string, object>();

            foreach (var column in columns)
            {
                row.Add(
                    column.Key,
                    column.Value == typeof(EnumTest?)
                        ? i == 0 ? null : (i % 2 == 0 ? EnumTest.EnumValue1 : EnumTest.EnumValue2)
                        : column.Value == typeof(int?)
                            ? i == 0 ? null : i
                            : column.Value == typeof(DateTime?)
                                ? i == 0 ? null : DateTime.Now.AddMonths(i)
                                : column.Value == typeof(Guid?)
                                ? i == 0 ? null : Guid.NewGuid()
                                : column.Value == typeof(DateOnly?)
                                ? i == 0 ? null : DateOnly.FromDateTime(DateTime.Now.AddMonths(i))
                                : column.Value == typeof(TimeOnly?)
                                ? i == 0 ? null : TimeOnly.FromDateTime(DateTime.Now.AddMonths(i))
                                : $"{column.Key}{i}" 
                );
            }

            return row;
        }).ToList();
    }

    List<IDictionary<string, object>> dataToUpdate = new List<IDictionary<string, object>>();

    async Task EditRow(IDictionary<string, object> data)
    {
        if (!grid.IsValid) return;

        dataToUpdate.Add(data);
        await grid.EditRow(data);
    }

    async Task SaveRow(IDictionary<string, object> data)
    {
        await grid.UpdateRow(data);
    }

    void CancelEdit(IDictionary<string, object> data)
    {
        grid.CancelEditRow(data);
    }
}

```

DataGridDynamicDataEditComponent.razor

```auto
<RadzenTextBox @bind-Value=@Value Name="@Name" />
<RadzenRequiredValidator Text="Required" Component="@Name" Popup="true" />
@code {
    [Parameter]
    public string Name { get; set; }

    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
}

```

---

<div class="post-metadata">

**Author:** ![Francesco.P](https://forum.radzen.com/user_avatar/forum.radzen.com/francesco.p/32/20909_2.png) [@Francesco.P](https://forum.radzen.com/u/Francesco.P)\
**Post date:** [March 13, 2025, 1:14pm UTC](https://forum.radzen.com/t/validation-on-dynamic-datagrid/19914/11 "2025-03-13T13:14:34Z")

</div>

Thanks a lot for the example ! That's exactly what I needed 😃

By using the component it seems like the display position of the popup is a bit weird but I could fix it by adding Style="display: block;" into the validator

```auto
<RadzenRequiredValidator Text="Required" Component="@Name" Popup="true" Style="display: block;" />

```

Cheers!