Declined
Last Updated: 30 Sep 2021 07:51 by ADMIN
Shannon
Created on: 23 Sep 2021 10:23
Category: UI for Blazor
Type: Feature Request
0
ListView Seach Box
Please add a Search Box for the ListView like the one for the Grid.
1 comment
ADMIN
Dimo
Posted on: 30 Sep 2021 07:51

Hi Shannon,

The Grid SearchBox is a special case of the built-in Grid filtering. The ListView is a more visual component and has no built-in filtering at this point, so a SearchBox would have no basis.

It is possible to achieve the same behavior programmatically. Here is an example, which is a modified version of the ListView filtering demo. Notice that I have used a CompositeFilterDescriptor, instead of a FilterDescriptor. The Grid Filtering documentation explains the difference between the two types.

 

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

<TelerikListView Data="@ListViewData"
                 Pageable="true"
                 PageSize="10"
                 Width="600px">
    <HeaderTemplate>
        <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>
    </HeaderTemplate>
    <Template>
        <div style="display: inline-block; margin: 1em; padding: 1em; border: 1px solid #424242; background: #fafafa;">
            <strong>@context.Name:</strong>
            <br />
            @context.Description
        </div>
    </Template>
</TelerikListView>

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

    async Task LoadListViewData(string newSearchString)
    {
        SearchString = newSearchString;

        if (String.IsNullOrWhiteSpace(SearchString))
        {
            ListViewData = SourceData;
        }
        else
        {
            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));

            request.Filters.Add(cfd);

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

        LoadListViewData(SearchString);
    }

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

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.