Skip to content

docs(Filter): Fix basic usage example #3469

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dimodi merged 1 commit into from
Jan 27, 2026
Merged

docs(Filter): Fix basic usage example #3469

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 19 additions & 14 deletions components/filter/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ position: 0
---

# Blazor Filter Overview

The <a href="https://www.telerik.com/blazor-ui/filter" target="_blank">Blazor Filter component</a> serves as a complementary addition to data-bound components that do not have built-in filtering.

The component gives a unified way to build filter descriptors using its [fields](slug:filter-fields). You can also define different [operators](slug:filter-operators) and use these filter descriptors to filter data.

## Creating Blazor Filter

1. Use the `TelerikFilter` tag to add the component to your razor page.
2. Set the `Value` parameter via one-way or two-way binding.
3. Add the `FilterField` tag, a child tag of the `FilterFields`.
Expand All @@ -22,42 +24,45 @@ The component gives a unified way to build filter descriptors using its [fields]
>caption A basic configuration of the Telerik Filter.

````RAZOR
@* This code snippet showcases an example of a basic Filter configuration. *@

@using Telerik.DataSource

<TelerikFilter @ref="FilterRef" @bind-Value="@FilterValue">
<TelerikFilter Value="@FilterValue" OnUpdate="@OnFilterUpdate">
<FilterFields>
<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.Id))" Type="@(typeof(int))" Label="Id"></FilterField>
<FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="Name"></FilterField>
<FilterField Name="@(nameof(Person.BirthDate))" Type="@(typeof(DateTime))" Label="Birth Date"></FilterField>
</FilterFields>
</TelerikFilter>

@code {
private CompositeFilterDescriptor FilterValue { get; set; } = new();

private TelerikFilter? FilterRef { get; set; }

private CompositeFilterDescriptor FilterValue { get; set; } = new CompositeFilterDescriptor();
private void OnFilterUpdate()
{
// ...
}

public class Person
{
public int EmployeeId { get; set; }
public int Id { get; set; }

public string Name { get; set; } = string.Empty;

public int AgeInYears { get; set; }
public DateTime BirthDate { get; set; }
}
}
````

## Fields

The fields are responsible for setting up the Filter information. [Read more about the supported Blazor Filter fields...](slug:filter-fields)

## Events

The Blazor Filter generates events that you can handle and further customize its behavior. [Read more about the Blazor Filter events...](slug:filter-events).

## Filter Parameters

The Blazor Filter provides parameters that allow you to configure the component:

| Parameter | Type | Description |
Expand Down Expand Up @@ -188,10 +193,10 @@ The Filter exposes methods for programmatic operation. To use them, define a ref


## Next Steps
[Configure the Filter Fields](slug:filter-fields)

[Using the Filter Events](slug:filter-events)
* [Configure Filter Fields](slug:filter-fields)
* [Handle Filter Events](slug:filter-events)

## See Also

* [Live Demo: Filter](https://demos.telerik.com/blazor-ui/filter/overview)
* [Live Demo: Filter](https://demos.telerik.com/blazor-ui/filter/overview)
Loading