How to Implement distinct datasource in Syncfusion Blazor ListBox?

Overview

In Blazor applications, it’s common to need a way to display a list of items without duplicates. The Syncfusion Blazor ListBox component provides a user-friendly interface for displaying lists of items. This article demonstrates how to use the OnInitializedAsync method to filter out duplicate items from a list and bind the distinct list to a Syncfusion Blazor ListBox.

Prerequisites

Before implementing the distinct item selection, ensure you have the following:

Syncfusion Blazor components installed in your project. You can obtain them from the Syncfusion website.
A Blazor project set up and ready to integrate the ListBox component.

Implementation

First, include the necessary using directive for Syncfusion Blazor DropDowns at the top of your Razor page:

@using Syncfusion.Blazor.DropDowns

Next, define the ListBox component in your Razor markup with the appropriate type parameters and data source:

<SfListBox TValue="string[]" DataSource="@Data" TItem="VehicleData">
    <ListBoxEvents TValue="string[]" TItem="VehicleData"></ListBoxEvents>
    <ListBoxFieldSettings Text="Text" Value="Text" />
</SfListBox>

In the @code block, create a VehicleData class to represent the items in the list:

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

Then, initialize two lists: one for the original vehicle data and another to store the distinct list of vehicles:

public List<VehicleData> Data = new List<VehicleData> { };
public List<VehicleData> Vehicles = new List<VehicleData>
{
    // Add vehicle data with potential duplicates
};

Use the OnInitializedAsync event to filter out duplicates and populate the Data list with distinct items:

protected async override Task OnInitializedAsync()
{
    Data = Vehicles.Select(i => new { i.Text })
        .Distinct().Select(x => new VehicleData { Text = x.Text }).ToList();
}

This code uses LINQ to select the Text property from each VehicleData object, applies the Distinct method to remove duplicates, and then projects the results back into a list of VehicleData objects.

Live Sample

To see a live example of the distinct item selection in action, visit the Syncfusion Blazor Playground at the following link:

https://blazorplayground.syncfusion.com/embed/LDVfZisEfFdLuPWy

Additional References

Conclusion

We hope you enjoyed learning how to Implement distinct datasource in Syncfusion Blazor ListBox.

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

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor ListBox and other Blazor components.

If you have any questions 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)