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

Filter Events

This article explains the available events for the Telerik Filter for Blazor:


The ValueChanged event fires when the value has changed. Its event handler receives the updated CompositeFilterDescriptor as an argument.

Handle ValueChanged.

@* This code snippet showcases an example of how to handle the ValueChanged event. *@

@using Telerik.DataSource

<TelerikFilter Value="@Value" ValueChanged="@OnValueChanged">
        <FilterField Name="@(nameof(Person.EmployeeId))" Type="@(typeof(int))" Label="Id"></FilterField>
        <FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="First Name"></FilterField>
        <FilterField Name="@(nameof(Person.AgeInYears))" Type="@(typeof(int))" Label="Age"></FilterField>
        <FilterField Name="@(nameof(Person.IsOutOfOffice))" Type="@(typeof(bool))" Label="Out Of Office"></FilterField>
        <FilterField Name="@(nameof(Person.HireDate))" Type="@(typeof(DateTime))" Label="Hire Date"></FilterField>

    <strong>ValueChanged triggered count: </strong> @TriggeredValueChangedCount

    <div class="log-container">
        List of applied filters:

@code {
    public CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();
    public int TriggeredValueChangedCount { get; set; }

    private void OnValueChanged(CompositeFilterDescriptor filter)
        Value = filter;

    static RenderFragment<CompositeFilterDescriptor> compositeFilterDescriptorFragment = (cfd) =>
                <div>CompositeFilterDescriptor info: Logical Operator: @cfd.LogicalOperator</div>

                FilterDescriptor currentFilterDescriptor;
                CompositeFilterDescriptor currentCompositeDescriptor;

                @foreach (var item in cfd.FilterDescriptors)
                    if (item is CompositeFilterDescriptor)
                        currentCompositeDescriptor = item as CompositeFilterDescriptor;
                        currentFilterDescriptor = item as FilterDescriptor;

    static RenderFragment<FilterDescriptor> filterDescriptorFragment = (fd)
        => @<text><div>FilterDescriptor info: Member: @fd.Member Type: @fd.MemberType Value: @fd.Value</div></text>;
        public class Person
        public int EmployeeId { get; set; }

        public string Name { get; set; }

        public int AgeInYears { get; set; }

        public bool IsOutOfOffice { get; set; }

        public DateTime HireDate { get; set; }

    .log-container div {
        clear: both;

See Also

In this article