BlazorDrop 2.0.2

BlazorDrop

BlazorDrop is a lightweight and flexible Blazor component library for building searchable, lazy-loaded dropdowns with support for virtual scrolling, async filtering, custom templates, and both single- and multi-select modes.

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
• Value change binding
• Custom display selector
• Loading indicator while fetching data
• Disabled state support
• Designed for .NET Core 3.1
• Custom item templates

Installation

You can install the library via NuGet:

dotnet add package BlazorDrop

Required Imports

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

@using BlazorDrop
@using BlazorDrop.Components

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="KeyValuePair<Guid, string>"
        DisplaySelector="@(x => x.Value)"
        OnLoadItemsAsync="LoadPageAsync"
        OnSearchAsync="SearchForItemAsync"
        OnItemClickAsync="OnValueChanged"
        ShowLoadingIndicator="true"
        Disabled="false"
        Placeholder="Select value"
        UpdateSearchDelayInMilliseconds="600"
        PageSize="10"
        ValueNotFoundMessageText="Not fount"
        Class="active-select"
        Id="select-enabled"
        CurrentPage="@(0)"
        Value="@_selectedItem" />

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="KeyValuePair<Guid, string>"
        DisplaySelector="@(x => x.Value)"
        OnLoadItemsAsync="LoadPageAsync"
        OnItemClickAsync="OnValueChanged"
        ShowLoadingIndicator="true"
        PageSize="10"
        ValueNotFoundMessageText="Not fount"
        Class="drop-list"
        Id="drop-list"
        CurrentPage="@(0)"
        Value="@_selectedItemInDisabledSelect">
</BlazorDropList>

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 | IEnumerable<T> | List of selected items in multi-select mode | | Style | string | Optional inline CSS style applied to the container |

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 are a lightweight, reusable components that renders a Material-style loading bar to indicate asynchronous data loading.

Parameters

.NET Compatibility

Notes

• Scroll detection triggers when the user reaches the bottom of the dropdown list.
• Click outside and scroll handlers are automatically attached and detached.