DxTextEditSettings.ShowValidationIcon Property

Specifies whether an editor shows validation icons.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public bool? ShowValidationIcon { get; set; }

Property Value

Type	Default	Description
Nullable<Boolean>	null	true to display a validation icon; false to hide a validation icon.

Remarks

The Grid allows you to validate input data and display errors.

Run Demo: Input Validation Read Tutorial: Validate User Input in Blazor Grid

In EditCell and EditRow edit modes, the component automatically displays validation icons once validation is completed. In EditForm and PopupEditForm edit modes, validation icons are hidden. Set an editor’s ShowValidationIcon property to true to display validation icons in this editor:

Razor

<DxGrid Data="DataSource"
        KeyFieldName="EmployeeId"
        EditModelSaving="Grid_EditModelSaving"
        DataItemDeleting="Grid_DataItemDeleting"
        CustomizeDataRowEditor="Grid_CustomizeDataRowEditor">
    <Columns>
        <DxGridCommandColumn Width="160px" />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        @{
            var employee = (EditableEmployee)EditFormContext.EditModel;
        }
        <DxFormLayout CssClass="w-100">
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:" ColSpanMd="6">
                @EditFormContext.GetEditor("Title")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IEnumerable<EditableEmployee> DataSource { get; set; }

    void Grid_CustomizeDataRowEditor(GridCustomizeDataRowEditorEventArgs e) {
        if(e.EditSettings is ITextEditSettings settings)
            settings.ShowValidationIcon = true;
    }
    // ...
}

Employee.cs

public partial class EditableEmployee {
    public int EmployeeId { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string Title { get; set; }
    [Required]
    [Range(typeof(DateTime), "1/1/1970", "1/1/2000", ErrorMessage = "BirthDate must be between {1:d} and {2:d}")]
    public Nullable<System.DateTime> BirthDate { get; set; }
    [Required]
    [Range(typeof(DateTime), "1/1/2000", "1/1/2022", ErrorMessage = "HireDate must be between {1:d} and {2:d}")]
    public Nullable<System.DateTime> HireDate { get; set; }
}

You can enable the GlobalOptions.ShowValidationIcon property to display validation icons in editors in the grid edit form and standard EditForm. To enable or disable validation icons at runtime, use the ITextEditSettings.ShowValidationIcon property instead.

Implements

ShowValidationIcon