Soenneker.Blazor.TomSelect

A Blazor interop library for the select user control library, Tom Select

This library simplifies the integration of Tom Select into Blazor applications, providing access to options, methods, plugins, and events. A demo project showcasing common usages is included.

Diligence was taken to align the Blazor API with JS. Refer to the Tom Select documentation for details.

Installation

dotnet add package Soenneker.Blazor.TomSelect

Add the following to your Startup.cs file

public void ConfigureServices(IServiceCollection services)
{
    services.AddTomSelectInteropAsScoped();
}

Usage

@using Soenneker.Blazor.TomSelect

<TomSelect
    TItem="Country" 
    TType="string" 
    OnItemAdd="OnItemAdd"
    Data="@_countries"
    TextField="@(item => item.Name)"
    ValueField="@(item => item.Id.ToString())" 
    @ref="_tomSelect"
    Configuration="@_configuration"
    @bind-Items="_selectedCountries"> // Supports two-way binding
</TomSelect>

@code{
    private TomSelect<Country, string> _tomSelect = default!;

    private List<Country>? _selectedCountries = [];
    private List<Country>? _countries;

    private readonly TomSelectConfiguration _configuration = new()
    {
        Plugins = [TomSelectPluginType.DragDrop]
    };

    protected override async Task OnInitializedAsync()
    {
        _countries = await Http.GetFromJsonAsync<List<Country>>("sample-data/countries.json");
    }

    private void OnItemAdd((string str, TomSelectOption obj) result)
    {
        Logger.LogInformation("OnItemAdd fired: Value: {value}", str);
    }

    private void LogSelectedItems()
    {
        foreach (Country item in _selectedCountries)
        {
            Logger.LogInformation("Selected item: {0}", item.Name);
        }
    }
}