@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<p>Search (filter) by typing letters (aa - zz)</p>

<p>DropDownList value: @DropDownListValue</p>

<p>DropDownList filter string: @DropDownListFilterString</p>

<TelerikDropDownList TItem="@Product" TValue="@int" OnRead="@GetItems"
                     @bind-Value="@DropDownListValue"
                     ValueField="@nameof(Product.Id)"
                     TextField="@nameof(Product.Name)"
                     Filterable="true"
                     FilterOperator="@StringFilterOperator.Contains"
                     Width="300px">
</TelerikDropDownList>

@code {
    int DropDownListValue { get; set; }
    string DropDownListFilterString { get; set; } = string.Empty;

    List<Product> Products { get; set; } = new();

    async Task GetItems(DropDownListReadEventArgs args)
    {
        if (args.Request.Filters.Any())
        {
            FilterDescriptor filter = (FilterDescriptor)args.Request.Filters.First();
            DropDownListFilterString = filter.Value.ToString()!;
        }
        else
        {
            DropDownListFilterString = "(none)";
        }

        await Task.Delay(1);

        var result = Products.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
    }

    protected override void OnInitialized()
    {
        Products = new List<Product>();
        for (int i = 1; i <= 99; i++)
        {
            Products.Add(new Product()
            {
                Id = i,
                Name = $"Product {((char)(i % 27 + 64)).ToString()}{((char)(i % 27 + 64)).ToString()}"
            });
        }

        base.OnInitialized();
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = default!;
    }
}