Refresh combobox with added value

[Özgür ALTUNSÖGÜT]

Hello,

I try to accomplish a simple thing with combobox but I haven't done it yet. Could you please send me an example of the requirement below.

I have a combobox inside a component. I fill this combobox on initializing. When I press any key If there is no record start with this key NoRecordsTemplate shows and I press a button inside this template. This button opens a dialog form. When I save a new item to database and close the dialog, I refresh the list. Everything till here works as aspected. The problem is  combobox doesn't select the added Id value. 

For example

My databasource is below;

Id (int)     Name (string)

1               John

2               Erik

Imagine I add new value with Id = 3 and Name = Marry

I see Marry in the combobox and 3(Id value) as a Text of the combobox.

I want to see Marry as a Text value of the combobox.

<SfComboBox @ref="ComboObj" TValue="int" @bind-Value="ComboValue" TItem="TItem"  DataSource="@DataSource" AllowFiltering="true">

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

    <ComboBoxEvents TValue="int" ValueChange="OnChange"></ComboBoxEvents>

    <ComboBoxTemplates TItem="TItem">

        <NoRecordsTemplate>

            <div>

                <div id="nodata">You can add a new value by using the button below.</div>

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

            </div>

        </NoRecordsTemplate>

    </ComboBoxTemplates>

</SfComboBox>

[Sevvandhi Nagulan]

Hi Özgür, 

Greetings from Syncfusion support. 

We resolved the reported issue in the latest version (v18.1.52). Kindly upgrade the application to latest version to get rid of the latest version. 

Demo sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1264227429 

If still issue persists, kindly revert us with the more details about your requirement to proceed further. 

Regards, 

Sevvandhi N 

[Özgür ALTUNSÖGÜT]

Hello,

thank you for your reply and example.

I have tested the example but It's not working as aspected.

Please just add the code below to check the value of the combobox.

<span>Combo Val: @ComboValue</span>

You will see that the value doesn't change.

Regards.

[Sevvandhi Nagulan]

Hi Özgür, 

We would like to notify you that, when you select the item from the popup, the two-way binding value will be changed. Also, when you add a value using the AddItem method, the value will be added to the popup list item. Therefore, the two-way connection will not be changed at that time. You can change the value by choosing a new value. 

Regards, 

Sevvandhi N 

[Özgür ALTUNSÖGÜT]

Hello,

Thank you for your reply but this is not a solution to my requirement. Imagine that you have hundreds of records in the combobox and when the user adds a new value, he has to find the value in the list. This is an extra operation.

In my case, I open a SfDialog control when a user clicks to add a new item button then the new value adds to the database, and combobox refreshes with this new value.

Also, I have the ID value of the newly added item. Everything till here works perfectly.

The only problem is to set ComboValue = ID. But the system doesn't select the new item. 

Normally, if I put a button and set ComboValue to something in the click event combobox shows the value as a selected value. 

I think there is a timing problem here. I put await Task.Delay(1000). This time system selects the new value for the first time. but for second time system shows ID as a text of the combobox.

Also one more thing, I want to set empty string or set "Please select an item" string as the initial text. But now I see 0 (zero) as a text of combobox initially.

[Sevvandhi Nagulan]

Hi Özgür, 

Thanks for the patience. 

We looked at the reported issue. As we have already mentioned, value cannot be changed when the new item is added. So, we suggest that you bind both the value and the text property in the same way to get rid of the recorded problem. 

<SfComboBox @ref="ComboObj" TValue="string" @bind-Value="ComboValue" TItem="TItem" DataSource="@DataSource" AllowFiltering="true"> 

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

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

        <ComboBoxTemplates TItem="TItem"> 

            <NoRecordsTemplate> 

                <div> 

                    <div id="nodata">You can add a new value by using the button below.</div> 

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

                </div> 

            </NoRecordsTemplate> 

        </ComboBoxTemplates> 

    </SfComboBox> 

 

    public void New() 

    { 

        List<TItem> newItem = new List<TItem> 

    { 

        new TItem() { Name = Text, Code = 5 }, 

    }; 

        this.ComboObj.AddItem(newItem); 

        this.ComboObj.HidePopup(); 

        ComboValue = Text; 

 

 

    } 

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

Regards, 

Sevvandhi N