New to Telerik UI for Blazor? Download free 30-day trial

ListView SearchBox


Product ListView for Blazor


How to implement a ListView search box, similar to the SearchBox in the Blazor Grid? I would like to use a single input to search and filter in all data fields of the ListView data.


It is possible to search and filter the ListView programmatically. The example below is a modified version of the ListView filtering demo.

  • Notice the usage of a CompositeFilterDescriptor, instead of a FilterDescriptor. This is because we are searching in multiple fields with an OR logical operator. The Grid Filtering documentation explains the difference between the two descriptor types.
  • Populate the FilterDescriptors collection of the CompositeFilterDescriptor object with one FilterDescriptor for each field that you want to search in.

ListView Search Textbox

@* ListView SearchBox *@

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

<TelerikListView Data="@ListViewData"
        <div style="padding: 1em">
            <label for="searchbox">Search in both Name and Descriprtion:</label>
            <TelerikTextBox Value="@SearchString" ValueChanged="@LoadListViewData"></TelerikTextBox>
            <TelerikButton OnClick="@ClearSearch">Clear</TelerikButton>
        <div class="listview-box">
            <br />

    .listview-box {
        display: inline-block;
        margin: 1em;
        padding: 1em;
        border: 1px solid #424242;
        background: #fafafa;

@code {
    List<Product> ListViewData;
    List<Product> SourceData;
    string SearchString = "22";

    async Task LoadListViewData(string newSearchString)
        SearchString = newSearchString;

        if (String.IsNullOrWhiteSpace(SearchString))
            ListViewData = SourceData;
            var request = new DataSourceRequest()
                Filters = new List<IFilterDescriptor>()

            var cfd = new CompositeFilterDescriptor();

            cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
            cfd.FilterDescriptors.Add(new FilterDescriptor("Name", FilterOperator.Contains, SearchString));
            cfd.FilterDescriptors.Add(new FilterDescriptor("Description", FilterOperator.Contains, SearchString));


            ListViewData = (SourceData.ToDataSourceResult(request).Data as IEnumerable<Product>).ToList();

    async Task ClearSearch()
        SearchString = "";
        await LoadListViewData(SearchString);

    protected override async Task OnInitializedAsync()
        SourceData = new List<Product>();

        for (int i = 1; i <= 50; i++)

            SourceData.Add(new Product()
                ID = i,
                Name = "Product " + (i * 11).ToString(),
                Description = "Description " + (i * 22).ToString()

        await LoadListViewData(SearchString);

    public class Product
        public int ID { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
In this article