Filter menu in Blazor Gantt Chart component
18 Nov 201816 minutes to read
The Syncfusion Blazor Gantt Chart component provides a filter menu for each column, allowing filtering based on data type and supported operators.
To enable this feature, configure GanttFilterSettings.FilterType as Menu and set AllowFiltering to true.
Custom component in filter menu
You can customize the filter menu in the Syncfusion® Blazor Gantt Chart component using the FilterTemplate property. This allows you to replace the default filter controls with custom components such as dropdowns or textboxes for specific columns. By default, the Gantt Chart uses Autocomplete for string columns, NumericTextBox for number columns, DatePicker for date columns, and DropDownList for boolean column.
Here is a sample code demonstrating how to render a DropDownList for the TaskName column:
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
<SfGantt DataSource="@TaskCollection" AllowFiltering="true" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
<GanttFilterSettings FilterType="Syncfusion.Blazor.Gantt.FilterType.Menu"></GanttFilterSettings>
<GanttColumns>
<GanttColumn Field="TaskId" HeaderText="Task ID" Width="100">
</GanttColumn>
<GanttColumn Field="TaskName" HeaderText="Task Name" Width="200">
<FilterTemplate>
@{
var contextModel = context as PredicateModel<string>;
}
<SfDropDownList TValue="string" TItem="TaskData" Placeholder="Select Task Name"
DataSource="@TaskCollection"
@bind-Value="contextModel.Value"
ID="TaskNameFilter">
<DropDownListFieldSettings Value="TaskName" Text="TaskName"></DropDownListFieldSettings>
</SfDropDownList>
</FilterTemplate>
</GanttColumn>
<GanttColumn Field="Duration" HeaderText="Duration" Width="120">
</GanttColumn>
</GanttColumns>
</SfGantt>
@code {
public List<TaskData> TaskCollection { get; set; } = new();
protected override void OnInitialized()
{
TaskCollection = GetTaskCollection();
}
public static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>()
{
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), },
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 1, },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 10), },
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2026, 01, 07), EndDate = new DateTime(2026, 01, 09), Progress = 30, ParentId = 5, },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2026, 01, 07), EndDate = new DateTime(2026, 01, 09), Progress = 40, ParentId = 5, },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2026, 01, 07), Duration = "0", Progress = 30, ParentId = 5, }
};
return Tasks;
}
public class TaskData
{
public int TaskId { get; set; }
public string? TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string? Duration { get; set; }
public int Progress { get; set; }
public int? ParentId { get; set; }
}
}Hide default filter icon while perform filtering through method
To remove the default filter icon from the UI, apply the following CSS:
.e-filtermenudiv.e-icons.e-icon-filter {
display: none;
}You can perform filtering programmatically using the FilterByColumnAsync method, and reset it using ClearFilteringAsync through button actions.
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Buttons
<div style="margin-bottom: 10px; display: flex; gap: 20px;">
<SfButton ID="performFilter" CssClass="e-primary" OnClick="PerformFilter">Filter Task Name Column</SfButton>
<SfButton ID="clearFilter" CssClass="e-outline" OnClick="ClearFilter">Clear Filter</SfButton>
</div>
<SfGantt @ref="Gantt" DataSource="@TaskCollection" AllowFiltering="true" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
<GanttFilterSettings FilterType="Syncfusion.Blazor.Gantt.FilterType.Menu"></GanttFilterSettings>
<GanttColumns>
<GanttColumn Field="TaskId" HeaderText="Task ID" Width="100"></GanttColumn>
<GanttColumn Field="TaskName" HeaderText="Task Name" Width="200"></GanttColumn>
<GanttColumn Field="Duration" HeaderText="Duration" Width="120"></GanttColumn>
</GanttColumns>
</SfGantt>
<style>
.e-filtermenudiv.e-icons.e-icon-filter {
display: none;
}
</style>
@code {
public List<TaskData> TaskCollection { get; set; } = new();
public SfGantt<TaskData>? Gantt;
protected override void OnInitialized()
{
TaskCollection = GetTaskCollection();
}
private async Task PerformFilter()
{
if(Gantt!=null)
{
await Gantt.FilterByColumnAsync("TaskName", "startswith", "Project");
}
}
private async Task ClearFilter()
{
if (Gantt != null)
{
await Gantt.ClearFilteringAsync();
}
}
public static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>()
{
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), },
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 1, },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 10), },
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2026, 01, 07), EndDate = new DateTime(2026, 01, 09), Progress = 30, ParentId = 5, },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2026, 01, 07), EndDate = new DateTime(2026, 01, 09), Progress = 40, ParentId = 5, },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2026, 01, 07), Duration = "0", Progress = 30, ParentId = 5, }
};
return Tasks;
}
public class TaskData
{
public int TaskId { get; set; }
public string? TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string? Duration { get; set; }
public int Progress { get; set; }
public int? ParentId { get; set; }
}
}Customize the default input component of filter menu dialog
You can customize the input components in the filter menu of the Syncfusion Blazor Gantt Chart by using the FilterTemplate property in GanttColumn. This enables column-specific customization and precise control over the behavior of individual filter components.
| Column Type | Default component | Customization | API Reference |
|---|---|---|---|
| String | AutoComplete | Eg: Autofill=”false” | AutoComplete API |
| Number | NumericTextBox | Eg: ShowSpinButton=”false” | NumericTextBox API |
| Boolean | DropDownList | Eg: SortOrder=”SortOrder.Ascending” | DropDownList API |
| Date | DatePicker | Eg: WeekNumber=”true” | DatePicker API |
| DateTime | DateTimePicker | Eg: ShowClearButton=”true” | DateTimePicker API |
The following sample demonstrates how to disable the autofill feature by setting the Autofill parameter to false for the TaskName column, and how to configure a NumericTextBox without a spin button (ShowSpinButton set to false) for the TaskID column.
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Grids
<SfGantt DataSource="@TaskCollection" AllowFiltering="true" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
<GanttFilterSettings FilterType="Syncfusion.Blazor.Gantt.FilterType.Menu"></GanttFilterSettings>
<GanttColumns>
<GanttColumn Field="TaskId" HeaderText="Task ID" Width="100">
<FilterTemplate>
@{
var contextModel = context as PredicateModel<int>;
}
<SfNumericTextBox TValue="int" ShowSpinButton="false" @bind-Value="contextModel.Value"></SfNumericTextBox>
</FilterTemplate>
</GanttColumn>
<GanttColumn Field="TaskName" HeaderText="Task Name" Width="200">
<FilterTemplate>
@{
var contextModel = context as PredicateModel<string>;
}
<SfAutoComplete TValue="string" TItem="string" ID="TaskNameFilter" @bind-Value="contextModel.Value"
Placeholder="Select Task Name" DataSource="@CustomerData">
</SfAutoComplete>
</FilterTemplate>
</GanttColumn>
<GanttColumn Field="Duration" HeaderText="Duration" Width="120"></GanttColumn>
<GanttColumn Field="StartDate" HeaderText="Start Date" Width="150" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly"></GanttColumn>
<GanttColumn Field="Progress" HeaderText="Progress" Width="100"></GanttColumn>
</GanttColumns>
</SfGantt>
@code {
public List<TaskData> TaskCollection { get; set; } = new();
private List<string> CustomerData { get; set; } = new();
protected override void OnInitialized()
{
TaskCollection = GetTaskCollection();
CustomerData = TaskCollection?
.Select(t => t.TaskName ?? string.Empty)
.Distinct()
.ToList() ?? new List<string>();
}
public static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>()
{
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), },
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 1, },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 10), },
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2026, 01, 07), EndDate = new DateTime(2026, 01, 09), Progress = 30, ParentId = 5, },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2026, 01, 07), EndDate = new DateTime(2026, 01, 09), Progress = 40, ParentId = 5, },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2026, 01, 07), Duration = "0", Progress = 30, ParentId = 5, }
};
return Tasks;
}
public class TaskData
{
public int TaskId { get; set; }
public string? TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string? Duration { get; set; }
public int Progress { get; set; }
public int? ParentId { get; set; }
}
}