I can't add new item to combobox

[Gencer]

Hi,  

I am listing data in the group field. But I cannot save the selection. I cannot add a new item. Please help.

My api code in aspnet webapi is as follows:

        [HttpGet("grup")]

        public async Task<ActionResult<List<string>>> GetGrup()

        {

            var data = await _context.tblAdrFirma

                .Select(e => e.Grup)

                .Distinct() // Benzersiz kayıtları getir

                .AsNoTracking()

                .ToListAsync();

            return Ok(data);

        }

    }

My code to call the API in Blazor server: 

    public async Task<List<string>> GetGrupAsync()

    {

        return await _httpClient.GetFromJsonAsync<List<string>>("https://localhost:7133/api/AdrFirma/grup");

    }

My combobox code on my page:

        <SfComboBox DataSource="@dataGrupList" TValue="string" TItem="string"

            AllowFiltering="true">

@code:

private List<string> dataGrupList = new();

   protected override async Task OnInitializedAsync()

   {

       dataobje = await AdrFirmaService.GetDataByIdAsync(id);

       dataGrupList = await AdrFirmaService.GetGrupAsync() ;

       StateHasChanged(); // UI'yı güncelle

   }

I have tried many different things by examining the forum. But I have not been successful. The current combobox section is only listing the data. I have removed the other codes so that there is no confusion. The data list opens, I select an item but I cannot save it to the field. I have the same problem when I enter a new item.

[Yaswin Vikhaash Rajaretenam]

Hi Gencer,

We have validated your query and would like to suggest using the approach outlined below to allow adding new data dynamically. By accessing the ComboBox instance, you can utilize the AddItemsAsync method to add new items to the data source programmatically.

Please refer to the provided code example, sample link, and video reference for detailed implementation guidance.

Sample Link: Blazor ComboBox Custom Value Example - Syncfusion Demos

Code Refrence:

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

   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" },
    };
    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();
    }
}

 

 

 

Video Reference:

Regards,

Yaswin Vikhaash