Add a new item to DropDownList

[Valentyn Horobets]

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>

                                    }

                                    else

                                    {

                                        <div>@company.ShortName</div>

                                    }

                                }

                            </ItemTemplate>

                            <ChildContent>

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

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

                            </ChildContent>

                        </SfDropDownList>

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?

Thanks   

[UdhayaKumar Duraisamy]

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.

Documentation:

• Getting Started with Blazor ComboBox Component

• Adding Custom Value to Blazor ComboBox Component

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

[Valentyn Horobets]

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.

Thanks

[UdhayaKumar Duraisamy]

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">

                    <NoRecordsTemplate>

                        <div>

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

                        </div>

                    </NoRecordsTemplate>

                </ComboBoxTemplates>

            </SfComboBox>

        </div>

    </div>

</div>

 

@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();

    }

}

Documentation:

• https://blazor.syncfusion.com/documentation/combobox/customization

• https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync

[Valentyn Horobets]

Thanks a lot

[UdhayaKumar Duraisamy]

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