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. Image for the cookie policy date
close icon

Add a new item to DropDownList

Hi there,

I was using DropDownList component to allow user to select some option from the list.

Now I've got a requirement to add possibility for user to add it's own option, like on the pic below

So user is able to select the company from existing list or add its own. 
The code I was hoping to work is the following:

<SfDropDownList TItem="ClientCompany" TValue="int?" @bind-Value="_companyId" Width="100%" Placeholder="Please Select" AllowFiltering="true" DataSource="@Companies">

                            <ItemTemplate Context="company">


                                    if (company.Id < 0)


                                        <SfTextBox @bind-Value="_tempCompanyName" />

                                        <SfButton Type="button" CssClass="btn-primary">Confirm</SfButton>









                                <DropDownListEvents TItem="ClientCompany" TValue="int?" ValueChange="@OnClientCompanyChanged"></DropDownListEvents>

                                <DropDownListFieldSettings Value="Id" Text="ShortName"></DropDownListFieldSettings>



So I put a fake company with Id = -1 on the top of my Companies list and for the firs item I display text box with a button. But I cannot input anything there as it appears automatically selecting this option.

Any thoughts how can I achieve this?


5 Replies

UD UdhayaKumar Duraisamy Syncfusion Team April 14, 2023 08:17 AM UTC

You can try the Syncfusion ComboBox component for your needs. The ComboBox permits the user to enter a custom value that is not included in the predetermined set of values. The AllowCustom property enables this support by default. To learn more, please refer to the documentation and online demo shared below.


Online Demo: https://blazor.syncfusion.com/demos/combobox/custom-value?theme=fluent

VH Valentyn Horobets April 14, 2023 07:56 PM UTC

Nice, thanks.

Is it possible to set up combo box to open pop-up with all options when I just click to enter value. Now it's opening only if to click arrow.


UD UdhayaKumar Duraisamy Syncfusion Team April 17, 2023 02:00 PM UTC

You can call the ShowPopupAsync method in the Focus event of the ComboBox component so that it opens the popup when the component has focus.

@using Syncfusion.Blazor.DropDowns;

@using Syncfusion.Blazor.Buttons;

@using Syncfusion.Blazor.Data;


<div class="col-lg-12 control-section">

    <div class='control-wrapper'>

        <div class="custom-value">

            <label class="example-label">Select a country</label>

            <SfComboBox @ref="@ComboObj" TValue="string" Placeholder="e.g. Australia" TItem="TItem" DataSource="@DataSource" AllowCustom="true" AllowFiltering="true">

                <ComboBoxFieldSettings Text="Name" Value="Name"></ComboBoxFieldSettings>

                <ComboBoxEvents TValue="string" Filtering="@OnFiltering" Focus="@FocusHandler" TItem="TItem" />

                <ComboBoxTemplates TItem="TItem">



                            <div id="nodata">No matched item, would you like to add it to the list as a new item?</div>

                            <SfButton id="btn" class="e-control e-btn custom-button" @onclick="@AddItem">Add New Item</SfButton>









@code {

    private SfComboBox<string, TItem> ComboObj;

    private string Custom { get; set; }

    private List<TItem> CustomDataItems { get; set; } = new List<TItem>();

    public class TItem


        public string Name { get; set; }

        public string Code { get; set; }


    private async Task FocusHandler(Object args)


       await this.ComboObj.ShowPopupAsync();




VH Valentyn Horobets April 17, 2023 05:19 PM UTC

Thanks a lot

UD UdhayaKumar Duraisamy Syncfusion Team April 18, 2023 04:52 AM UTC

We are happy to assist you. Please get back to us if you need any further assistance on this.

Live Chat Icon For mobile
Up arrow icon