Selecting the newly added value after adding item to ObservableCollection

Question

Please find code below for what I am trying to achieve: Adding an item to an existing DropDownList and selecting this new value.Although the new data is displayed correctly in the dropdown, it does not select this value automatically.------------------------------------------------------------------------------------------------------------------------@page "/DropDownListRefresh"@using Syncfusion.Blazor.DropDowns@using Syncfusion.Blazor.Inputs@using System.Collections.ObjectModel;

New Person: Add
List

Values

selectedId: @selectedId
bindId: @bindId
newPersonName: @newPersonName

@code { private string newPersonName = ""; private int bindId = 0; private int selectedId = 0; private ObservableCollection data { get; set; } protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); data = new ObservableCollection(new List() { new Person { Id = 0, FirstName = "-" }, new Person { Id = 1, FirstName = "Mike" }, new Person { Id = 2, FirstName = "Glenn" }, new Person { Id = 3, FirstName = "Guy" }, new Person { Id = 4, FirstName = "Johnny" }, new Person { Id = 5, FirstName = "Nick" } }); } public class Person { public int Id { get; set; } public string FirstName { get; set; } } protected void OnClick(System.EventArgs args) { data.Add(new Person() { Id = (data.Max(x => x.Id + 1)), FirstName = newPersonName }); bindId = data.Max(x => x.Id); StateHasChanged(); }}

Sureshkumar P · Accepted Answer

Hi Michael,  
 
Thanks for your detailed update with code example. 
 
We have confirmed the Bind value not updated properly when components having value after adding the new item through the addItems as bug in our end and include the fix in the Volume-2 release, which is scheduled on end of June 2020. We appreciate your patience until then  
 
You can track the status of the bug from the below feedback link.  
https://www.syncfusion.com/feedback/15096    
 
Regards, 
Sureshkumar P

Sureshkumar P · Answer

Hi Michael,

Greetings from Syncfusion support.

Based on your shared information with code example, we suspect that you want to add the new item using addItem method and set the added value to component. You can add the data into any potion (we have added 0^th index) and select those added list value. Kindly refer the below code example.

<SfDropDownList @ref="DDLObject" TItem="GameFields" TValue="string" PopupHeight="230px" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games">

<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

</SfDropDownList>

<button @onclick="@AddDataSource">Click to add the datasource</button>

@code

{

SfDropDownList<string, GameFields> DDLObject;

public class GameFields

{

public string ID { get; set; }

public string Text { get; set; }

}

private ObservableCollection<GameFields> Games = new ObservableCollection<GameFields>() {

new GameFields(){ ID= "Game1", Text= "American Football" },

new GameFields(){ ID= "Game2", Text= "Badminton" },

new GameFields(){ ID= "Game3", Text= "Basketball" },

new GameFields(){ ID= "Game4", Text= "Cricket" },

new GameFields(){ ID= "Game5", Text= "Football" },

new GameFields(){ ID= "Game6", Text= "Golf" },

new GameFields(){ ID= "Game7", Text= "Hockey" },

new GameFields(){ ID= "Game8", Text= "Rugby"},

new GameFields(){ ID= "Game9", Text= "Snooker" }

};

public string DropVal;

public void AddDataSource()

{

// add the datasource dynamically using addItems method

this.Games.Insert(0,new GameFields() { ID = "Game10", Text = "Tennis" });

this.DropVal = "Game10";

}

We have created the sample based on your requirements. Please refer the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDLAddItem-1383598944

Regards,

Sureshkumar p

Michael · Answer

Unfortunately, this did not have the desired result.

I am using version 18.1.55

When no item is selected, he indeed takes the first item of the list when adding a new record.

But when I have a value already selected, and add the item, it does not change the value to the newly added value, but to the item above the one I selected.

When I change the line:

this.Games.Insert(0,new GameFields() { ID = "Game10", Text = "Tennis" });

into

this.Games.Insert(this.Games.Count, new GameFields() { ID = "Game10", Text = "Tennis" });

it adds it to the end, and never shows the correct value after adding, but if no value was selected before clicking the button, it does select the value when opening the dropdown.

I have also changed the sample to work with an integer value instead of a string value, which gives similar results, but not exactly.

(It does select the last in the dropdown if no value is selected yet when clicking the button if the value is added to the end)

I hope it is clear what the problem is.

If not, please let me know.

Best regards,

Michael