DxDropDownBox.ShowValidationIcon Property

Specifies whether the editor shows a validation icon.

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; otherwise, false; null to inherit the value from the GlobalOptions.ShowValidationIcon property.

Remarks

DevExpress input editors support data validation. You can add editors to the Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model. When a user enters invalid data into an editor, the editor gets a red outline. You can also use the ShowValidationIcon global option or the editor’s ShowValidationIcon property to specify whether the editor should display validation icons - error or success .

Razor

<EditForm Model="@model" Context="EditFormContext">
    <DataAnnotationsValidator />
    <DxFormLayout>
        <DxFormLayoutItem Caption="Customer:" ColSpanMd="12">
            <DxDropDownBox @bind-Value="model.Value"
                            QueryDisplayText="QueryText"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                            NullText="Select a customer..."
                            ShowValidationIcon="true">
                <DropDownBodyTemplate Context="ddbBodyContext">
                    <Editors_DropDownBox_SearchLookup_Grid DropDownBox="@ddbBodyContext.DropDownBox" />
                </DropDownBodyTemplate>
            </DxDropDownBox>
        </DxFormLayoutItem>
    </DxFormLayout>
</EditForm>

@code {
    object Value { get; set; }
    private MyModel model = new MyModel();

    string QueryText(DropDownBoxQueryDisplayTextContext arg) {
        if(arg.Value is Customer value)
            return value.ContactName;
        return string.Empty;
    }
}

Editors-DropDownBox-SearchLookup-Grid.razor

@inject NwindDataService NwindDataService
<style>
    .templateGrid {
        border-width: 0;
        width: 800px;
        height: 350px
    }
</style>
<DxGrid @ref="Grid"
        Data="@GridData"
        KeyFieldName="@nameof(Customer.CustomerId)"
        ShowSearchBox="true"
        SearchTextParseMode="GridSearchTextParseMode.GroupWordsByAnd"
        SelectionMode="GridSelectionMode.Single"
        AllowSelectRowByClick="true"
        SelectedDataItem="@(DropDownBox.Value as Customer)"
        SelectedDataItemChanged="@GridSelectedDataItemChanged"
        FocusedRowEnabled="true"
        TextWrapEnabled="false"
        CssClass="templateGrid"
        >
    <Columns>
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="City" />
    </Columns>
</DxGrid>

@code {
    [Parameter]
    public IDropDownBox DropDownBox { get; set; }
    IGrid Grid;
    IEnumerable<Customer> GridData { get; set; }
    void GridSelectedDataItemChanged(object item) {
        DropDownBox.BeginUpdate();
        DropDownBox.Value = item;
        DropDownBox.HideDropDown();
        DropDownBox.EndUpdate();
    }
    protected override async Task OnInitializedAsync() {
        GridData = await NwindDataService.GetCustomersAsync();
    }
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender && DropDownBox.Value is Customer value) {
            await Grid.SetFocusedDataItemAsync(value);
            await Grid.MakeDataItemVisibleAsync(value);
        }
    }
}

Model

public class MyModel {
    [Required]
    public object Value { get; set; }
}

Implements

ShowValidationIcon