Validator isn't working on a dropdown within the datagrid

Radzen.Blazor Components
1

Hi,

I implemented a Radzen DataGrid with add and edit options with validations for few of the fields. Validation works fine on textboxes (1st and second column) but it isn't working for dropdown (3rd column). Below is my code, but just to brief on few things here, I have used bind-Value, and the Name and Component matches. But the list which is assigned to the datagrid itself is different from the list which I am binding to this dropdown, not sure if this would cause issues. Also since this field is int, I've changed it to nullable int and verified that it is infact null during debugging. Please let me know if any further code snippet is required.

PS: RadzenTemplateForm inside EditTemplate is something that I tried, but with or without that, issue is still the same.

<RadzenDataGrid @ref="grid" Data="@_myData" TItem="_myData"
                RowCreate="@InsertRow" RowUpdate="@UpdateRow"
                AllowPaging=true PageSize="10" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary=true
                AllowColumnResize=true AllowSorting=true
                AllowAlternatingRows=false EditMode="DataGridEditMode.Single" ColumnWidth="200px">
    <HeaderTemplate>
        <RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle" Text="Add New Row" Click="@InsertRow" Disabled="isEdit" />
    </HeaderTemplate>

    <Columns>
        <RadzenDataGridColumn Property="Code" Title="Code" Width="150px" Frozen="true" FrozenPosition="FrozenColumnPosition.Left">
            <EditTemplate Context="x">
                <div style="display: flex; flex-direction: column; width: 100%;">
					<RadzenTextBox @bind-Value="x.Code" Name="Code" Disabled="isEdit" />
					<RadzenRequiredValidator Text="Code is required" Component="Code" Popup=false />
                </div>
            </EditTemplate>
        </RadzenDataGridColumn>

        <RadzenDataGridColumn Property="Name" Title="Name" Width="200px" Frozen="true" FrozenPosition="FrozenColumnPosition.Left">
            <EditTemplate Context="x">
                <div style="display: flex; flex-direction: column; width: 100%;">
                <RadzenTextBox @bind-Value="x.Name" Name="Name" />
                <RadzenRequiredValidator Text="Name is required" Component="Name" Popup=false />
                </div>
            </EditTemplate>
        </RadzenDataGridColumn>

        <RadzenDataGridColumn Property="ClassDetails.ClassName" Title="ClassName" Width="200px">
            <EditTemplate Context="x">
                <RadzenTemplateForm Data="@x">
                    <div style="display: flex; flex-direction: column; width: 100%;">
                        <RadzenDropDown @bind-Value="x.ClassID"
                                        Data="@_filteredClasses"
                                        Name="ClassID"
                                        TextProperty="@nameof(ClassDetails.ClassName)"
                                        ValueProperty="@nameof(ClassDetails.ClassID)"
                                        Disabled="isEdit" />
                        <RadzenRequiredValidator Text="ClassName is required" Component="ClassID" Popup=false />
                    </div>
                </RadzenTemplateForm>
            </EditTemplate>
        </RadzenDataGridColumn>

        <RadzenDataGridColumn Context="x" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Width="100px" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
            <Template Context="x">
                <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="rz-my-1 rz-ms-1" Click="@(() => Edit(x))" />
                <RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" Variant="Variant.Flat" Size="ButtonSize.Medium" Shade="Shade.Lighter" class="rz-my-1 rz-ms-1" Click="(() => Delete(x))" />
            </Template>
            <EditTemplate Context="x">
                <RadzenButton Icon="save" ButtonStyle="ButtonStyle.Success" Variant="Variant.Filled" Size="ButtonSize.Medium" aria-label="Save" Click="@(() => Save(x))" />
                <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="rz-my-1 rz-ms-1" aria-label="Cancel" Click="@(() => Reset(x))" />
            </EditTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>


@code {
	StudentModel _myData;
	ClassDetails _classData;
}
2

We can't run this code to test it - use our demos (they are editable) to prepare runnable example where the validator with DropDown will not work.

3

What is the type of the Code property? If it is a non-nullable number (e.g. int) you also need to set the DefaultValue attribute of the validator to 0.

<RadzenRequiredValidator Text="Code is required" DefaultValue="0" Component="Code" Popup=false />
4

Code and Name fields are string and I have assigned String.Empty when trying adding a new row. The issue I have is with ClassID field in the dropdown, which is nullable int and has the value "null" when adding a new row. I will try making it int so that the default value is 0 and try providing DefaultValue="0" in the validator and see if that works.

5

I will give that a try and let you know. Thanks.

6

Tried changing the ClassID field to nullable int (without a DefaultValue in the Validator) and also tried changing it to non-nullable int where the DefaultValue is infact 0 when clicked on Save (with DefaultValue set to 0 in Validator), either way did not work.

I've added below my C# code just to make sure I haven't missed anything here. If the textbox is empty and when I click on Save, the Save function gets called post which it gives an error and doesn't call into the InsertRow() where I insert the data into the database. But if the combobox is empty, it is still calling the InsertRow() without any errors.

@code {
	async Task InsertRow()
	{
		var row = new MyModel();
		await grid.InsertRow(row);
	}

	async Task Edit(MyModel row)
	{
		isEdit = true;
		tempRow = row.Copy();
		await grid.EditRow(row);
	}
	
	async Task Save(MyModel row)
	{
		await grid.UpdateRow(row);
	}

	async Task InsertRow(MyModel row)
	{
		var insertedRow = await InsertAPI();

		row.ID = insertedRow.ID;
	}
}
7

I tried this under "DataGrid InLine Editing" section of the component in the official site and it did not work. What I've done is added a Name attribute to RadzenDropDown, added a validator and provided the same name to the Component attribute and tried with and without DefaultValue attribute set to 0. Either way, it did not work.

Changed the below dropdown:

<RadzenDataGridColumn Property="Customer.CompanyName" Title="Customer" Width="280px">
	<EditTemplate Context="order">
			<RadzenDropDown @bind-Value="order.CustomerID" Data="@customers" TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)" Style="width:100%; display: block;"
							InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select customer" }})" />
	</EditTemplate>
</RadzenDataGridColumn>

to

<RadzenDataGridColumn Property="Customer.CompanyName" Title="Customer" Width="280px">
	<EditTemplate Context="order">
		<RadzenTemplateForm Data="@order">
			<RadzenDropDown @bind-Value="order.CustomerID" Data="@customers" Name="Customer" TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)" Style="width:100%; display: block;"
							InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select customer" }})" />
			<RadzenRequiredValidator Text="Customer is required" DefaultValue="0" Component="Customer" Popup="true" />
		</RadzenTemplateForm>
	</EditTemplate>
</RadzenDataGridColumn>

image
image2437×1192 235 KB

8

This is related to non nullable int not strings

9

Since the bind-Value was order.CustomerID and ValueProperty="@nameof(Customer.CustomerID)", I assumed CustomerID is what gets stored in the orders (an int column) and the same would be validated as well. But even without that, the issue persists.

10

Here is what worked for me - you don't need the form since the DataGrid will handle internally EditContext:

image
image1920×1080 239 KB

image
image1920×1080 190 KB

11

Thanks for the quick response. I was able to get it fixed and figured out where I had missed as well. Initially I did try without the TemplateForm but at that time, I didn't have the DefaultValue parameter, so it didn't work. Everything else that I tried, including DefaultValue parameter, nullable and non-nullable int later didn't work because I had TemplateForm added already. Appreciate all the help.