TelerikCombobox for blazor search in itemtemplate

Question

I have a telerik comobox with filter option enabled. I have added itemtemplate for displaying id and value in the textfield. I want to filter with contains when user type in the dropdown.

Below is the code I tried

<TelerikComboBox Data="@CostCenters"
                     Filterable="true" FilterOperator="@filterOperator"
                     Placeholder="Find cost center by typing"
                     @bind-Value="@SelectedCostCenter1" TextField="CostCenterName" ValueField="CostCenterId">


        <ItemTemplate Context="employeeItem">

            @( (employeeItem as CostCenter).CostCenterId)  @((employeeItem as CostCenter).CostCenterName)
        </ItemTemplate>
    </TelerikComboBox>

But the above code is only filtering by name

score 1 · Answer 1 · answered Jan 25 '21 at 15:37

The built-in filtering works on the text (reference) so if you want to filter by multiple fields, you should use the OnRead event and handle the filtering as you need. It's important to note that the contains filter only makes sense for strings, so it is not very likely that you could filter IDs with that since they are usually numbers or guids.

Anyway, here's an example how you can filter the data as required - in this sample - by both ID and string text:

@SelectedValue
<br />
<TelerikComboBox Data="@CurrentOptions"
                 OnRead=@ReadItems
                 Filterable="true"
                 Placeholder="Find a car by typing part of its make"
                 @bind-Value="@SelectedValue" ValueField="Id" TextField="Make">
</TelerikComboBox>

@code {
    public int? SelectedValue { get; set; }
    List<Car> AllOptions { get; set; }

    List<Car> CurrentOptions { get; set; }

    protected async Task ReadItems(ComboBoxReadEventArgs args)
    {
        if (args.Request.Filters.Count > 0)
        {
            Telerik.DataSource.FilterDescriptor filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;
            string userInput = filter.Value.ToString();
            string method = filter.Operator.ToString(); // you can also pass that along if you need to

            CurrentOptions = await GetFilteredData(userInput);
        }
        else
        {
            CurrentOptions = await GetFilteredData(string.Empty);
        }

    }

    // in a real case that would be a service method
    public async Task<List<Car>> GetFilteredData(string filterText)
    {
        //generate the big data source that we want to narrow down for the user
        //in a real case you would probably have fetched it from a database
        if (AllOptions == null)
        {
            AllOptions = new List<Car>
            {
                new Car { Id = 1, Make = "Honda" },
                new Car { Id = 2, Make = "Opel" },
                new Car { Id = 3, Make = "Audi" },
                new Car { Id = 4, Make = "Lancia" },
                new Car { Id = 5, Make = "BMW" },
                new Car { Id = 6, Make = "Mercedes" },
                new Car { Id = 7, Make = "Tesla" },
                new Car { Id = 8, Make = "Vw" },
                new Car { Id = 9, Make = "Alpha Romeo" },
                new Car { Id = 10, Make = "Chevrolet" },
                new Car { Id = 11, Make = "Ford" },
                new Car { Id = 12, Make = "Cadillac" },
                new Car { Id = 13, Make = "Dodge" },
                new Car { Id = 14, Make = "Jeep" },
                new Car { Id = 15, Make = "Chrysler" },
                new Car { Id = 16, Make = "Lincoln" }
            };
        }

        if (string.IsNullOrEmpty(filterText))
        {
            return await Task.FromResult(AllOptions);
        }

        var filteredData = AllOptions.Where(c => c.Make.ToLowerInvariant().Contains(filterText.ToLowerInvariant()));
        // here's an attempt to also filter by ID based on a string, implement this as needed
        int id;
        if (int.TryParse(filterText, out id))
        {
            var filteredById = AllOptions.Where(c => c.Id.ToString().Contains(filterText));
            filteredData = filteredData.Union(filteredById);
        }

        return await Task.FromResult(filteredData.ToList());
    }

    public class Car
    {
        public int Id { get; set; }
        public string Make { get; set; }
    }
}

TelerikCombobox for blazor search in itemtemplate

1 Answers1