CustomValue not working

[Alexander Kuhlmann]

Hello, 

I am using a combobox with simple strings.

But if I enter a unknown value, the popup to add this value did not appear.

<SfComboBox @bind-Value="@Category" DataSource="@categoryNames" TValue="string" TItem="string" ShowClearButton="false" AllowCustom="true"></SfComboBox>

Are I am missing something?

Best regards,

[Priyanka Karthikeyan]

Hi Alexander Kuhlmann,

 

Thank you for reaching out to us.

To add a custom value to the popup list in the ComboBox component, please refer to the demo linked below:

🔗 Demo: Custom Value in ComboBox

In this example, when you type a character in the ComboBox, it filters the list based on the input. If no matching item is found, a button will appear in the popup list. Clicking this button allows the entered text to be added as a new item to the existing list.

Feel free to try it out and let us know if you have any further questions or need assistance in implementing this feature in your application.

Regards,

Priyanka K

[Alexander Kuhlmann]

HI  Priyanka, 

yes I know, but the button did not appear, have I to activate this somehow?

Best regards,

Alex

[Priyanka Karthikeyan]

Hi Alexander Kuhlmann,

 

We have created a sample based on the demo reference, and the custom value has been properly added  in the popup. For your reference, please find the sample and a video illustration attached below.

Sample: https://blazorplayground.syncfusion.com/LXVeDTidfbIakQSz

To help us investigate further, could you kindly provide the following details?

• Issue-reproducing sample 
• Steps to replicate the issue
• Video illustration of the problem 

Sharing these details will help us better understand the issue and provide a prompt resolution.

Thank you for your cooperation.

Regards,

Priyanka K

[Alexander Kuhlmann]

Hi Priyanka, 

I have just these on my page:

<SfComboBox @bind-Value="@Category" DataSource="@categoryNames" TValue="string" TItem="string" ShowClearButton="true" AllowCustom="true"></SfComboBox>

and this in the code part:

        private string Category = "";

        private readonly List<string> categoryNames = ["Cat1","Cat2"];

and here are two screenshots what is happening on my system:

As you can see, there is no button to add "xyz"

And I tried this in a new Blazor ServerApp, without custom theme, just the default Theme comming with Syncfusion.Blazor.Themes. there is no button, too.

[Priyanka Karthikeyan]

Hi Alexander Kuhlmann,

Thank you for the update.

To achieve the desired functionality, you’ll need to use the NoRecordsTemplate to display the custom button, and handle the addition of new items using the AddItemsAsync method. Kindly make the following modifications on your end and let us know if you need any further assistance.

 

 

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

<style>

    .control-wrapper {

        max-width: 250px;

        margin: 0 auto;

        padding: 50px 0px 0px;

    }

    .example-label {

        font-size: 14px;

        margin-bottom: 6px;

    }

    .e-btn.custom-button {

        margin-top: 10px;

    }

</style>

@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 OnFiltering(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)

    {

        Custom = args.Text;

        args.PreventDefaultAction = true;

        var query = new Query().Where(new WhereFilter() { Field = "Name", Operator = "contains", value = args.Text, IgnoreCase = true });

        query = !string.IsNullOrEmpty(args.Text) ? query : new Query();

        await ComboObj.FilterAsync(CustomDataItems, query);

    }

    private List<TItem> DataSource = new List<TItem>

    {

        new TItem() { Name = "Australia", Code = "AU" },

        new TItem() { Name = "Bermuda", Code = "BM" },

        new TItem() { Name = "Canada", Code = "CA" },

        new TItem() { Name = "Cameroon", Code = "CM" },

        new TItem() { Name = "Denmark", Code = "DK" },

        new TItem() { Name = "France", Code = "FR" },

        new TItem() { Name = "Finland", Code = "FI" },

        new TItem() { Name = "Germany", Code = "DE" },

        new TItem() { Name = "Greenland", Code = "GL" },

        new TItem() { Name = "Hong Kong", Code = "HK" },

        new TItem() { Name = "India", Code = "IN" },

        new TItem() { Name = "Italy", Code = "IT" }

    };

    protected override void OnInitialized()

    {

        CustomDataItems = DataSource;

    }

    private async Task AddItem()

    {

        var customData = new TItem() { Name = Custom, Code = Custom };

        await this.ComboObj.AddItemsAsync(new List<TItem> { customData });

        CustomDataItems.Add(customData);

        await this.ComboObj.HidePopupAsync();

    }

}

 

Regards,

Priyanka K

[Alexander Kuhlmann]

Hi Priyanka, 

thank you for your help.

I was missing the   <NoRecordsTemplate>

How it is working.

[Priyanka Karthikeyan]

Hi Alexander Kuhlmann,
 

Thank you for the update. We are glad to hear that the issue has been resolved on your end. Please feel free to reach out to us if you need any further assistance.

 

Regards,

Priyanka K