How to edit ListBox DataSource with ObservableCollection in Blazor?

2 mins read

In Blazor ListBox applications, you may encounter scenarios where you need to edit the data source of a ListBox component dynamically. This can be achieved by utilizing the ObservableCollection feature, which provides a dynamic data collection that automatically updates the UI when items are added, removed, or updated.

Using ObservableCollection with Syncfusion ListBox

Below is an example demonstrating how to edit the ListBox datasource using an ObservableCollection. This is particularly useful when you want to modify data on the fly and ensure that your UI reflects these changes immediately.

Code Snippet

First, include the Syncfusion ListBox component in your Blazor application with the necessary field settings:

<SfListBox TValue="string[]" TItem="VehicleData" DataSource="@Vehicles">
    <ListBoxFieldSettings Text="Text" Value="Id" />
</SfListBox>
<SfButton CssClass="e-btn" Content="Modify Data" @onclick="modifyData"></SfButton>

Next, implement the modifyData method to update the specific item in your ObservableCollection:

private void modifyData()
{
    var item = Vehicles.FirstOrDefault(i => i.Id == "Vehicle-06");
    if (item != null)
    {
        item.Text = "Smith";
    }
}

In the above code, we search for an item with the ID Vehicle-06 within the ObservableCollection<VehicleData> named Vehicles. If the item exists, we modify its Text property.

Observable Collection Definition

To use ObservableCollection, ensure you have the correct namespace included:

using System.Collections.ObjectModel;

Then, define your ObservableCollection:

public ObservableCollection<VehicleData> Vehicles { get; set; }

Implementing the VehicleData Class

Your VehicleData class should be structured to support the ObservableCollection:

public class VehicleData
{
    public string Id { get; set; }
    public string Text { get; set; }
}

Sample Link

For a practical demonstration, you can refer to the provided sample link which showcases the implementation of these concepts:

ObservableCollection Sample in Blazor

Additional References

For further reading and more detailed information on working with Syncfusion Blazor components, please refer to the following resources:

By following the above guidelines, you can effectively modify the data source of a ListBox in a Blazor application using the ObservableCollection feature, ensuring that your UI remains in sync with your data model.

Conclusion

I hope you enjoyed learning about how to edit ListBox DataSource with ObservableCollection in Blazor.

You can refer to our Blazor ListBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor ListBox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)