DxDropDownBox.ShowValidationIcon Property

Specifies whether the editor shows a validation icon.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[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
Editors-DropDownBox-SearchLookup-Grid.razor
CSS
Model

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;
    }
}

razor

@inject NwindDataService NwindDataService
<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);
        }
    }
}

css

.templateGrid {
    border-width: 0;
    width: 800px;
    height: 350px;
}

csharp

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

Implements

ShowValidationIcon