# DataGrid: Filter Template
This example demonstrates how to define custom RadzenDataGrid column filter template.
Keywords: datagrid, column, filter, template
> API reference: [RadzenDataGrid API](https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenDataGrid-1.md)
## Examples
## Blazor DataGrid custom Column FilterTemplate
Build a custom Blazor DataGrid column filter with FilterTemplate - replace the default filter UI with your own controls, like a slider, date range, or dropdown.
```razor
@if (employees == null)
{
Loading...
}
else
{
Custom filtering template with IQueryable binding
@(string.Join(',', context.WorkStatus.Select(i => Enum.GetName((WorkStatus)i))))
@(string.Join(',', context.WorkStatuses.Select(s => s.Name)))
}
@code {
RadzenDataGrid grid;
int? idValue;
DateTime? hireDate;
TitleOfCourtesy? currentTOC;
IEnumerable selectedCompanyNames;
IEnumerable selectedWorkStatus;
IEnumerable allWorkStatuses = Enum.GetValues(typeof(WorkStatus)).Cast().Select(t => new { Text = $"{t}", Value = t });
List companyNames = new List {"Vins et alcools Chevalier", "Toms Spezialitäten", "Hanari Carnes", "Richter Supermarkt", "Wellington Importadora", "Centro commercial Moctezuma" };
public enum TitleOfCourtesy
{
Ms,
Mr,
All = -1
}
public enum WorkStatus
{
Office,
Remote,
}
public class WorkStatusModel
{
public Guid Id { get; set; } = Guid.NewGuid();
public string Name { get; set; }
public WorkStatusModel(string name) =>
Name = name;
}
public class Employee
{
public int ID { get; set; }
public string CompanyName { get; set; }
public DateTime HireDate { get; set; }
public DateOnly LeaveDate { get; set; }
public TitleOfCourtesy TitleOfCourtesy { get; set; }
public IEnumerable WorkStatus { get; set; }
public IEnumerable WorkStatuses { get; set; }
}
IEnumerable selectedWorkStatuses;
IEnumerable allWorkStatusesObject = Enum.GetValues(typeof(WorkStatus)).Cast().Select(t => new WorkStatusModel($"{t}"));
void OnSelectedWorkStatusesChange(object value)
{
if (selectedWorkStatuses != null && !selectedWorkStatuses.Any())
{
selectedWorkStatuses = null;
}
}
void OnSelectedCompanyNamesChange(object value)
{
if (selectedCompanyNames != null && !selectedCompanyNames.Any())
{
selectedCompanyNames = null;
}
}
void OnSelectedWorkStatusChange(object value)
{
if (selectedWorkStatus != null && !selectedWorkStatus.Any())
{
selectedWorkStatus = null;
}
}
void OnSelectedTOCChange(object value)
{
if (currentTOC == TitleOfCourtesy.All)
{
currentTOC = null;
}
}
IEnumerable employees;
protected override async Task OnInitializedAsync()
{
employees = await Task.FromResult(Enumerable.Range(0, 10).Select(i =>
new Employee
{
ID = i,
CompanyName = i < 4 ? companyNames[0] : companyNames[i - 4],
HireDate = DateTime.Now.AddMonths(-i),
LeaveDate = DateOnly.FromDateTime(DateTime.Now.AddMonths(+i)),
TitleOfCourtesy = i < 5 ? TitleOfCourtesy.Mr : TitleOfCourtesy.Ms,
WorkStatus = i < 3 ?
new WorkStatus[] { WorkStatus.Office } :
i < 5 ? new WorkStatus[] { WorkStatus.Remote } : new WorkStatus[] { WorkStatus.Office, WorkStatus.Remote },
WorkStatuses = i < 3 ? new WorkStatusModel[] { new WorkStatusModel(Enum.GetName(WorkStatus.Office)) } :
i < 5 ? new WorkStatusModel[] { new WorkStatusModel(Enum.GetName(WorkStatus.Remote)) } : new WorkStatusModel[] { new WorkStatusModel(Enum.GetName(WorkStatus.Office)), new WorkStatusModel(Enum.GetName(WorkStatus.Remote)) }
}).AsQueryable());
}
}
```
```razor
@if (employees == null)
{
Loading...
}
else
{
Custom filtering template with Custom Command
}
@code {
RadzenDataGrid grid;
int? idValue = null;
DateTime? hireDate = null;
TitleOfCourtesy? currentTOC;
List selectedWorkStatus;
string whereExpression;
public LogicalFilterOperator workStatusOperator { get; set; } = LogicalFilterOperator.Or;
List companyNames = new List {"Vins et alcools Chevalier", "Toms Spezialitäten", "Hanari Carnes", "Richter Supermarkt", "Wellington Importadora", "Centro commercial Moctezuma" };
List workStatuses = new List { "Office", "Remote", "Temporary", "Permanent" };
public enum TitleOfCourtesy
{
Ms,
Mr,
All = -1
}
public class Employee
{
public int ID { get; set; }
public string CompanyName { get; set; }
public DateTime HireDate { get; set; }
public TitleOfCourtesy TitleOfCourtesy { get; set; }
public string WorkStatus { get; set; }
}
void OnSelectedTOCChange(object value)
{
if (currentTOC == TitleOfCourtesy.All)
{
currentTOC = null;
}
}
IEnumerable employees;
protected override async Task OnInitializedAsync()
{
employees = await Task.FromResult(Enumerable.Range(0, 60).Select(i =>
new Employee
{
ID = i,
CompanyName = companyNames[i % 6],
HireDate = DateTime.Now.AddMonths(-i),
TitleOfCourtesy = i % 2 == 1 ? TitleOfCourtesy.Mr : TitleOfCourtesy.Ms,
WorkStatus = $"{(i < 20 ? "Office" : i >= 20 && i < 40 ? "Remote" : "Office, Remote")} {(i < 12 ? ", Temporary" : i >= 12 && i < 30 ? ", Permanent" : i > 30 && i < 44 ? ", Temporary" : ", Permanent")}"
}).AsQueryable());
}
private async Task WorkStatusFilterClear(RadzenDataGridColumn column)
{
if(selectedWorkStatus != null)
{
selectedWorkStatus = null;
await OnSelectedWorkStatusChange(column);
}
await column.CloseFilter();
}
private async Task WorkStatusFilterClose(RadzenDataGridColumn column)
{
await column.CloseFilter();
}
async Task OnSelectedWorkStatusChange(RadzenDataGridColumn column)
{
var createWhereExpression = new List();
if (selectedWorkStatus?.Any() == true)
{
whereExpression = string.Join($" {Enum.GetName(typeof(LogicalFilterOperator), workStatusOperator).ToLowerInvariant()} ",
selectedWorkStatus.Select(s => $"it.WorkStatus.Contains(\"{s}\")"));
}
else
{
whereExpression = null;
selectedWorkStatus = null;
}
await column.SetCustomFilterExpressionAsync(whereExpression);
}
void OnRender(DataGridRenderEventArgs args)
{
if (args.FirstRender)
{
args.Grid.Sorts.Add(new SortDescriptor() { Property = "CompanyName", SortOrder = SortOrder.Ascending });
args.Grid.Sorts.Add(new SortDescriptor() { Property = "TitleOfCourtesy", SortOrder = SortOrder.Ascending });
}
}
}
```