Soenneker.Blazor.TomSelect 2.1.714

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.AddTomSelect();
}

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" Items="_selectedCountries">
</TomSelect>

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

    private List<Country>? _selectedCountries;
    private List<Country>? _countries;

    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 _tomSelect.Items)
        {
            Logger.LogInformation("Selected item: {0}", item.Name);
        }
    }
}

⚠️ While a lot of the Tom Select library has been implemented, there are features not yet supported. If you need assistance or want to request a new feature, please open an issue or submit a pull request.