Using the Syncfusion ComboBox CustomValueSpecifier Event in Blazor

The Syncfusion ComboBox component for Blazor allows users to create a custom dropdown list with filtering and custom values. In this example, the ComboBox has a value field of type decimal and an item field of type EmployeeData. The AllowCustom feature is enabled, which means that users can input their own custom values into the ComboBox.

However, the Value field must be of type string when AllowCustom is enabled. To use a different type for the Value field, we can use the CustomValueSpecifier event to send the Item instead. The CustomValueSpecifierEventArgs object has two properties: Text and Item. Text represents the custom value entered by the user, and Item is an object of type EmployeeData that we can set to the custom value entered by the user.

Here is an example of how to use the CustomValueSpecifier event to send the Item instead of the Value:

<div id="ControlRegion">
    <div class='control-wrapper'>
        <p>@ComboVal</p>
        <SfComboBox TValue="decimal" TItem="EmployeeData" CssClass="template" Placeholder="Select a customer" DataSource="@Data" AllowCustom="true" AllowFiltering="true" @bind-Value="ComboVal">
            <ComboBoxFieldSettings Value="UnitCost" Text="UnitCost"></ComboBoxFieldSettings>
            <ComboBoxEvents TValue="decimal" TItem="EmployeeData" CustomValueSpecifier="@customValue"></ComboBoxEvents>
        </SfComboBox>
    </div>
</div>

@code {
    public decimal ComboVal;

    private void customValue(CustomValueSpecifierEventArgs<EmployeeData> args)
    {
        args.Item = new EmployeeData() { UnitCost = decimal.Parse(args.Text), TypeOfUse = args.Text };
    }
    public class EmployeeData
    {
        public string TypeOfUse { get; set; }
        public decimal UnitCost { get; set; }
    }
    List<EmployeeData> Data = new List<EmployeeData>();
}

For more information, please refer to the documentation and sample code provided in the release notes at this link.