ComboBox add new item button

[Iulia Rad]

I can't find in the documentation the functionality displayed on the front page with the add new item button. Please can someone guide me how to achieve this? How to add an item when no matched item is found.

https://www.syncfusion.com/blazor-components/blazor-combobox

[Sevvandhi Nagulan]

Hi Iulia,  

 

Greetings from Syncfusion support.  

 

We have checked the reported requirement. We have prepared the sample with ComboBox custom value, while clicking on the button the custom value will be added to the component. We used the noRecords Template for displaying the button, Since the button only visible when there is no matched item in the dataSource. Kindly refer the below code,  

 

<EjsComboBox @ref="comboboxObj" TValue="string" @bind-Value="Value" Placeholder="e.g. Australia" AllowCustom="true" ModelType="@models" DataSource="@Country"AllowFiltering="true">  

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

        <ComboBoxEvents TValue="string" Filtering="onFiltering"></ComboBoxEvents>  

        <ComboBoxTemplates>  

            <NoRecordsTemplate>  

                <div>  

                    <div id="nodata"> No matched item, do you want to add it as new item in list?</div>  

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

                </div>  

            </NoRecordsTemplate>  

        </ComboBoxTemplates>  

    </EjsComboBox>  

  

public void UpdateValue()  

    {  

        Countries newItem = new Countries { Name = Text, Code = Text };  

        this.comboboxObj.AddItem(newItem);  

        this.comboboxObj.HidePopup();  

    }  

 

Please find the sample below,  

 

Sample Link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-432751485  

 

Regards,  

Sevvandhi N  

[Iulia Rad]

Thanks!

[Sevvandhi Nagulan]

Hi Iulia, 

Most welcome. Please let us know if you need further assistance on this. 

Regards, 

Sevvandhi N 

[Andrzej]

Hi,

It's possible to add textbox to NoItemsTemplate? I have try, they shows, but I cannot start typing text in it.

I want to use NoItemsTemplate for adding new item when searched not found

''' <ComboBoxTemplates TItem="ClientPersonModel">

    <NoRecordsTemplate>

        <div>

            <SfTextBox Placeholder="First name" @bind-Value=firstName />

            <SfTextBox Placeholder="Last name" @bind-Value=lastName/>

            <SfButton Content="Add" @onClick=/>

        </div>

    </NoRecordsTemplate>

</ComboBoxTemplates>

'''

[Gokul Saravanan]

We would like to inform you that the ComboBox component maintains its focus even when the popup is open for filtering, ensuring proper functionality. If input elements are added to the popup, the ComboBox component will not allow the focus to move to the input. If the focus moves to an input inside the popup, the popup will close immediately. This behavior is designed to prevent unwanted popup visibility while moving the focus to next DOM element and ensure a better user interface.

 

Based on the information shared, it appears you are trying to add details like firstname, lastname, etc., to the data source if the entered credentials do not match any data source item. For this requirement, you can use our Data Form component to gather details from the user and display the form in the Dialog component for a better user experience.

 

We have prepared a sample for your requirement and shared it below for your reference.

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.DataForm

@using System.ComponentModel.DataAnnotations

 

<div style="margin:150px auto;width:300px">

   <SfComboBox TValue="Guid?" @ref="ComboBoxObj"

               TItem="ClientPersonModel"

               Placeholder="Podpisujący"

               DataSource="@Collections"

               @bind-Value="@Report"

               AllowFiltering="true"

               FilterType="FilterType.Contains"

               FloatLabelType="FloatLabelType.Auto">

        <ComboBoxFieldSettings Value="Id" Text="FullName"></ComboBoxFieldSettings>

        <ComboBoxTemplates TItem="ClientPersonModel">

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

<SfDialog @ref="DialogObj" Width="300px" ShowCloseIcon="true" Visible="false">

   <DialogTemplates>

        <Header>

            <h3>Registration Details</h3>

        </Header>

        <Content>

            <div class="dialogContent">

               <SfDataForm Model="@RegistrationDetailsModel"

                           OnValidSubmit="OnValidSubmitHandler">

                   <FormValidator>

                       <DataAnnotationsValidator></DataAnnotationsValidator>

                   </FormValidator>

                   <FormItems>

                       <FormAutoGenerateItems></FormAutoGenerateItems>

                   </FormItems>

                   <FormButtons>

                       <SfButton typeof="submit">Register</SfButton>

                   </FormButtons>

               </SfDataForm>

            </div>

        </Content>

   </DialogTemplates>

</SfDialog>

 

@code {

   public SfDialog DialogObj { get; set; }

   public SfComboBox<Guid?, ClientPersonModel> ComboBoxObj { get; set; }

   public string firstName { get; set; }

   public string lastName { get; set; }

   public Guid? Report { get; set; }

 

   public class ClientPersonModel

   {

        [Required]

        public Guid Id { get; set; }

 

        [Required]

        public string FullName { get; set; }

 

        public string PhoneNumber { get; set; }

 

        public string Email { get; set; }

   }

 

   private ClientPersonModel RegistrationDetailsModel = new ClientPersonModel();

 

   public async Task AddItem()

   {

        await DialogObj.ShowAsync(); // Show the dialog

   }

 

   public async Task OnValidSubmitHandler()

   {

        var data = RegistrationDetailsModel; // Get the form data

        Collections.Add(data); // Add the new item to the collection

        await ComboBoxObj.RefreshDataAsync(); // Refresh the ComboBox with the new data

        await DialogObj.HideAsync(); // Hide the dialog

   }

 

   List<ClientPersonModel> Collections = new List<ClientPersonModel>

   {

        new ClientPersonModel { Id = Guid.NewGuid(), FullName = "John Doe", PhoneNumber = "123-456-7890", Email = "[email protected]" },

        new ClientPersonModel { Id = Guid.NewGuid(), FullName = "Jane Smith", PhoneNumber = "234-567-8901", Email = "[email protected]" },

        new ClientPersonModel { Id = Guid.NewGuid(), FullName = "Bob Johnson", PhoneNumber = "345-678-9012" },

        new ClientPersonModel { Id = Guid.NewGuid(), FullName = "Alice Williams" },

    };

}

 

<style>

   html, body {

        height: 100%;

   }

</style>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorComboBox850343904

 

For additional reference, please check the following documentation:

• Adding Custom value to the Blazor ComboBox Component | Syncfusion
• Getting Started with Syncfusion Blazor DataForm Component in WebApp
• Getting Started with Syncfusion Blazor Dialog Component in Web App