BlazorDrop 2.0.3

BlazorDrop

BlazorDrop is a lightweight Blazor component library that provides customizable dropdowns with async loading, search, and virtualization support.

Features

• Asynchronous data loading by pages
• Search by input text with debounce
• Scroll-to-end detection for infinite loading
• Multi-select support with dynamic list rendering
• Two-way data binding support (@bind-Value)
• Custom display selector
• Loading indicator while fetching data
• Disabled state support
• Custom item templates
• Optional placeholder text
• Centralized JS Interop Service

Installation

You can install the library via NuGet:

dotnet add package BlazorDrop

Required Imports

Starting from this version, BlazorDrop requires DI registration for internal JS interop services.

Add the following line in Program.cs:

using BlazorDrop.Extensions;

builder.Services.AddBlazorDrop();

To use templates, make sure you import the following namespaces in your .razor file or _Imports.razor:

@using BlazorDrop
@using BlazorDrop.Components
//if loading bars required
@using BlazorDrop.Components.Loading

Then reference the JavaScript and CSS in your host page:

• For Blazor WebAssembly: wwwroot/index.html
• For Blazor Server: _Host.cshtml

<script src="_content/BlazorDrop/BlazorDropSelect.js"></script>
<link rel="stylesheet" href="_content/BlazorDrop/BlazorDropSelect.css" />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
  rel="stylesheet"
/>

Usage

BlazorDropSelect

<BlazorDropSelect
        T="SelectItem"
        DisplaySelector="@(x => x.Text)"
        OnLoadItemsAsync="LoadPageAsync"
        SearchAsync="SearchAsync"
        @bind-Value="@_selectedItem"
        ShowLoadingIndicator="true"
        Disabled="false"
        Placeholder="Select value"
        UpdateSearchDelayInMilliseconds="600"
        PageSize="10"
        ValueNotFoundMessageText="Not found" />

Parameters

Example Code

private Dictionary<Guid, string> _testValues = new();

private KeyValuePair<Guid, string> _selectedItem;

protected override async Task OnInitializedAsync()
{
    for (int i = 0; i < 1000; i++)
    {
        var id = Guid.NewGuid();
        _testValues.Add(id, $"Record {i}");
    }
}

private Task<IEnumerable<KeyValuePair<Guid, string>>> LoadPageAsync(int page, int pageSize)
{
    return Task.FromResult(_testValues.Skip(page * pageSize).Take(pageSize));
}

private Task<IEnumerable<KeyValuePair<Guid, string>>> SearchForItemAsync(string text)
{
    return Task.FromResult(_testValues.Where(x => x.Value.Contains(text)));
}

private Task<KeyValuePair<Guid, string>> OnValueChanged(KeyValuePair<Guid, string> item)
{
    _selectedItem = item;
    return Task.FromResult(item);
}

BlazorDropList

BlazorDropList is a Blazor component designed to render a virtualized, scrollable dropdown-style list that supports lazy loading and custom item display. It is styled according to Material Design principles.

<BlazorDropList
        T="SelectItem"
        DisplaySelector="@(x => x.Text)"
        OnLoadItemsAsync="LoadPageAsync"
        @bind-Value="@_selectedItem"
        ShowLoadingIndicator="true"
        PageSize="10" />

Parameters

Example Code

private Dictionary<Guid, string> _testValues = new();

private KeyValuePair<Guid, string> _selectedItem;

protected override async Task OnInitializedAsync()
{
    for (int i = 0; i < 1000; i++)
    {
        var id = Guid.NewGuid();
        _testValues.Add(id, $"Record {i}");
    }
}

private Task<IEnumerable<KeyValuePair<Guid, string>>> LoadPageAsync(int page, int pageSize)
{
    return Task.FromResult(_testValues.Skip(page * pageSize).Take(pageSize));
}

private Task<IEnumerable<KeyValuePair<Guid, string>>> SearchForItemAsync(string text)
{
    return Task.FromResult(_testValues.Where(x => x.Value.Contains(text)));
}

private Task<KeyValuePair<Guid, string>> OnValueChanged(KeyValuePair<Guid, string> item)
{
    _selectedItem = item;
    return Task.FromResult(item);
}

BlazorDropMultiSelect

BlazorDropMultiSelect is an extension of BlazorDropSelect supporting multi-value selection with the same lazy-loading and searchable capabilities.

<BlazorDropMultiSelect
        T="KeyValuePair<Guid, string>"
        DisplaySelector="@(x => x.Value)"
        OnLoadItemsAsync="LoadPageAsync"
        OnSearchAsync="SearchForItemAsync"
        OnItemClickAsync="OnMultiSelectChanged"
        ShowLoadingIndicator="true"
        Disabled="false"
        Placeholder="Select values"
        PageSize="10"
        Class="multi-select"
        Id="select-multi"
        CurrentPage="@(0)"
        SelectedValues="@_selectedItems" />

Parameters (additional to BlazorDropSelect): | Parameter | Type | Description | | ------------------------ | -------------------------------------- | ----------------------------------------------- | | SelectedValues | IList<T> | List of selected items | | MaxDisplayedTags | int | Max tags before summary (Default: 3) | | SelectedItemsTextFormat | string | Summary text format (default: "Selected: {0}") | | GetDisplayTextAsync | Func<IEnumerable<T>, Task<string>> | Custom logic for input text display |

Custom Item Template

You can customize how each dropdown item is rendered using the ItemTemplate parameter. This allows you to change formatting or apply custom styles.

<BlazorDropSelect T="KeyValuePair<Guid, string>"
                  Placeholder="With custom template"
                  Value="@_templatedSelect"
                  DisplaySelector="@(x => x.Value)"
                  OnLoadItemsAsync="LoadItemsPagedAsync"
                  OnSearchTextChangedAsync="SearchByTextAsync"
                  OnItemClickAsync="OnTemplateItemSelected"
                  ValueNotFoundMessageText="Not found">

    <ItemTemplate Context="item">
        <span class="text-success fw-semibold">@item.Value</span>
    </ItemTemplate>

</BlazorDropSelect>

Notes

• ItemTemplate accepts a RenderFragment<T> where T is the item type.
• If specified, this replaces the default item rendering.
• You can apply Bootstrap or custom CSS styles inside the template.

Loading Indicator Components

BlazorDropCircularProgressBar and BlazorDropLinearProgressBar - loading bar to indicate data loading.

Parameters

.NET Compatibility