Listbox does not update when underlying datasource is changed

Question

I have the following: ...public ObservableCollection SignedUp = new ObservableCollection();.......When I first initialize it like this, it works fine: SignedUp = new ObservableCollection(db.EventsSignups.Where(a => a.SessionId == e.SessionId).Include(a => a.Emp).Select(o => new KeyGuidPair { Text = o.Emp.FullName, Value = o.EmpId }).AsNoTracking().ToList());If the listbox or SignedUp object is empty and I try this, if works fine, the listbox is updated with the new record. var x = new KeyGuidPair { Value = GuidValue, Text = EmpName }; SignedUp.Add(x);BUT if I run the above when the listbox or the SignedUp object already contains records, the SignedUp adds the record no problem, but the listbox doesn't update to show the added records that are now contained in the SignedUp object list..???Thanks,Mike

Mohan Kumar Ramasamy · Accepted Answer

Hi Michael ,

We have checked your reported query, we can achieve your requirement sample level. We have set TValue as string[] instead of Guid. Please refer below code snippets.

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Buttons

@using System.Collections.ObjectModel

<SfListBox DataSource="@Data" TValue="string[]" TItem="ListData">

<ListBoxFieldSettings Text="Text" Value="Id"></ListBoxFieldSettings>

</SfListBox>

<SfButton CssClass="e-success" @onclick="PropertyBinding">Add</SfButton>

@code

{

private void OnValueChange(ListBoxChangeEventArgs<string[], ListData> args)

{

}

public ObservableCollection<ListData> Data { get; set; }

public class ListData

{

public Guid Id { get; set; }

public string Text { get; set; }

public static ObservableCollection<ListData> getListData()

{

ObservableCollection<ListData> Data = new ObservableCollection<ListData>();

Data.Add(new ListData() { Text = "Hennessey Venom", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "Bugatti Chiron", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "Bugatti Veyron Super Sport", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "SSC Ultimate Aero", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "Koenigsegg CCR", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "McLaren F1", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "Aston Martin One- 77", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "Jaguar XJ220", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "McLaren P1", Id = Guid.NewGuid() });

Data.Add(new ListData() { Text = "Ferrari LaFerrari", Id = Guid.NewGuid() });

return Data;

}

protected override void OnInitialized()

{

this.Data = ListData.getListData();

}

private void PropertyBinding()

{

this.Data.Add(new ListData() { Id = Guid.NewGuid(), Text = "RAKKI" });

}

For your reference, we have prepared a sample based on this, please refer below link.

Link: https://www.syncfusion.com/downloads/support/forum/158424/ze/158424-Listbox-Guid692928342

Please let us know, if you need any further assistance.

Regards,

Mohan Kumar R

Mohan Kumar Ramasamy · Answer

Hi Michael,

We have checked your reported issue, we are unable to reproduce the reported issue in our end. Please refer the below code snippets.

<SfListBox DataSource="@Data" TValue="string[]" TItem="ListData">

<ListBoxFieldSettings Text="text" Value="id"></ListBoxFieldSettings>

</SfListBox>

<SfButton CssClass="e-success" @onclick="PropertyBinding">Add</SfButton>

@code

{

public ObservableCollection<ListData> Data { get; set; }

public class ListData

{

public string id { get; set; }

public string text { get; set; }

public static ObservableCollection<ListData> getListData()

{

ObservableCollection<ListData> Data = new ObservableCollection<ListData>();

Data.Add(new ListData() { text = "Hennessey Venom", id = "list-01" });

Data.Add(new ListData() { text = "Bugatti Chiron", id = "list-02" });

Data.Add(new ListData() { text = "Bugatti Veyron Super Sport", id = "list-03" });

Data.Add(new ListData() { text = "SSC Ultimate Aero", id = "list-04" });

Data.Add(new ListData() { text = "Koenigsegg CCR", id = "list-05" });

Data.Add(new ListData() { text = "McLaren F1", id = "list-06" });

Data.Add(new ListData() { text = "Aston Martin One- 77", id = "list-07" });

Data.Add(new ListData() { text = "Jaguar XJ220", id = "list-08" });

Data.Add(new ListData() { text = "McLaren P1", id = "list-09" });

Data.Add(new ListData() { text = "Ferrari LaFerrari", id = "list-10" });

return Data;

}

protected override void OnInitialized()

{

this.Data = ListData.getListData();

}

private void PropertyBinding()

{

this.Data.Add(new ListData() { id = "c", text = "RAKKI" });

}

For your reference, we have prepared a sample based on this, please refer the below link.

Link: https://www.syncfusion.com/downloads/support/forum/152716/ze/152716-Listbox-RemoveItem1267649067

Please, refer the following links to know more about SF Blazor List Box component

Demo link - https://blazor.syncfusion.com/demos/listbox/default-functionalities?theme=bootstrap4

Please note that we have introduced several API break in this release. We would like you to review the breaking changes from the below location before you upgrade.

Link: https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#listbox

Please let us know, if you need any further assistance.

Regards,

Mohan kumar R

Mohan Kumar Ramasamy · Answer

Hi Michael, 
 
Please find below the latest sample 
 
Link: https://www.syncfusion.com/downloads/support/forum/158424/ze/158424-Listbox-ObserableCollection-2074459984  
 
Regards, 
Mohan kumar R

Michael Lambert · Answer

This issue was/is the object I am binding to contains a Guid as the Value and that was cause the issue.

public class KeyGuidPair

{

public string Text { get; set; }

public Guid Value { get; set; }

}

Is there anyway to use the Guid as the Value parameter? I'm thinking this is what is causing the issue, TValue="string[]", but not sure what it should be for a Guid. I tried Guid[], but that didn't work.

Daniel · Answer

I also have this bug, when I remove an item from the list, it doesn't refresh after a StateHasChanged()I have to make the SfListBox disappear and then reapper Ugly workaround

protected async Task RemoveSelectedAddress()

{

await Task.Yield();

if (SelectedAddress!=null)

{

await AddressService.DeleteById(SelectedAddress.Id);

if (User.Person!=null)

{

User.Person.Addresses.Remove(SelectedAddress);

/* Ugly hack to workaround problem when removing an item from DataSource and SfList doesnt update*/

IsEditingAddress = true;

StateHasChanged();

IsEditingAddress = false;

}

else

StoreGenAppManager.ShowNotification(Localizer["Nenhum endereço selecionado"],Localizer["Endereço"],NCPC.Blazor.Services.ToastType.Info);

IsEditingAddress=false;

StateHasChanged();

}

YuvanShankar Arunagiri · Answer

Hi Daniel,We
have checked your provided code snippet, and your workaround is different from
which we have provided a solution in this forum. Using the ObservableCollection
data collection in the Blazor Listbox component, while adding or removing the
items from the data source, it will refresh automatically without using the
StatehasChanged function. Refer to the below-attached sample code file and
video demonstration.Based
on your provided code snippet, you are fetching the data from the service and
setting it to the listbox component. So kindly share the below details.How did you get the data source
for the listbox and data type that data source in your project?Share the simple sample to
replicate your issue or share the full-page code snippet with video
demonstration.Based
on the above details, we will check and provide a better solution.Regards,YuvanShankar AAttachment: Index_e184247.zip