We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
As per your requirement, we have prepared a sample of the Custom Component with Tooltip Validation Using the Blazor DropDownList component and shared it below for your reference.
The DropdownList component is defined in the razor page along with the required properties and event binding. The following code snippets are added in a razor file with the name as CustomComponent.
[ CustomComponent. razor]
|
@using System.Linq.Expressions; @using Syncfusion.Blazor.DropDowns
<SfDropDownList ID="@ID" TValue="string" TItem="Countries" Value="@Value" DataSource="@Country" Width="300px" ValueChanged="ValueChanged" ValueExpression="@ValueExpression" Placeholder="@Placeholder" Readonly="@Readonly" @ref="Box"> <DropDownListFieldSettings Value="Name">DropDownListFieldSettings> <ValidationMessage For="@ValidationMessage"> ValidationMessage> SfDropDownList> @code {
private string _value; [Parameter] public string Value { get => _value; set { if (!EqualityComparer<string>.Default.Equals(value, _value)) { _value = value; ValueChanged.InvokeAsync(value); } } }
[Parameter] public Expression<Func<string>> ValueExpression { get; set; }
[Parameter] public EventCallback<string> ValueChanged { get; set; }
private SfDropDownList<string, Countries> Box { get; set; }
private FieldIdentifier Field { get; set; }
[CascadingParameter] public EditContext EditContext { get; set; } = default!;
[Parameter] public string ID { get; set; }
[Parameter] public string Placeholder { get; set; }
[Parameter] public bool Readonly { get; set; }
[Parameter] public Expression<Func<string>> ValidationMessage { get; set; }
protected override void OnInitialized() { Field = EditContext.Field("Text"); EditContext.OnValidationStateChanged += HandleValidationStateChanged; }
private void HandleValidationStateChanged(object sender, ValidationStateChangedEventArgs e) { StateHasChanged(); bool _invalid = EditContext.GetValidationMessages(Field).Any(); Box?.UpdateParentClass("", ""); StateHasChanged(); } public class Countries { public string Name { get; set; }
public string Code { get; set; } }
List<Countries> Country = new List<Countries> { new Countries() { Name = "Australia", Code = "AU" }, new Countries() { Name = "Bermuda", Code = "BM" }, new Countries() { Name = "Canada", Code = "CA" }, new Countries() { Name = "Cameroon", Code = "CM" }, }; } |
The EditForm with the bound model is declared on the main razor page. Inside the EditForm, the DataAnnotationsValidator and CustomComponent with wrapped SfTooltip component are added. The DataAnnotationsValidator is added to enable form validation based on validation attributes declared in the model. The CustomComponent component is then bound with the “Text” property from the model and the “Text” property contains DataAnnotations attributes used for validation. To learn more about SfTooltip component refer here
[ Index.razor ]
|
@page "/"
@using System.ComponentModel.DataAnnotations; @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Buttons
<div id="ControlRegion"> <div class="col-lg-12 control-section"> <div class="control_wrapper"> <EditForm Model="@_Records" OnValidSubmit="HandleSubmit"> <DataAnnotationsValidator /> <SfTooltip CloseDelay="0" OnOpen="ToolTipOpen" OpenDelay="0" OpensOn="Hover" Position="Position.TopCenter" Target="#text" WindowCollision="true"> <CustomComponent @bind-Value="@(_Records.Text)" ID="text" Placeholder="Select a Value" Readonly="false" ValidationMessage="@(() => _Records.Text)" @bind-Value:event="ValueChanged">CustomComponent> <TooltipTemplates> <Content> <ValidationMessage For="@(() => _Records.Text)">ValidationMessage> Content> TooltipTemplates> SfTooltip> <SfButton>SubmitSfButton> EditForm> div> div> div> @code { private ModalData _Records = new();
protected override void OnInitialized() { base.OnInitialized(); }
private static void ToolTipOpen(TooltipEventArgs args) { args.Cancel = !args.HasText; }
private void HandleSubmit() {
}
public class ModalData { [Required(ErrorMessage = "This field is required.")] public string Text { get; set; } }
} |
NOTE : It is necessary to bind Value, ValueExpression, and native ValueChanged event for accessing the value changes and triggering validation. To retrieve the validation message from the custom component, it is required to add the ValidationMessage tag in the DropdownList component.
[ Output ]
 |
