Gantt Filter Menu
One of the filter modes of the Gantt is a popup menu with filter options that you can open from the column headers.
In this article:
Basics
To enable the filter menu, set the FilterMode property of the grid to Telerik.Blazor.GanttFilterMode.FilterMenu.
The Gantt will render a button in the column header that you click to get a popup with filtering options. The popup lets you choose filter operator, filter criteria, to apply and clear the filter.
A key difference in the behavior from the filter row is that the filter is now applied only upon a button click, not upon input change. This may improve performance with large data sets.
Filter Menu in Telerik Gantt
@* Filter menu in the column header *@
<<TelerikGantt Data="@Data"
Width="100%"
Height="600px"
IdField="Id"
FilterMode="@GanttFilterMode.FilterMenu"
ParentIdField="ParentId">
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttColumns>
<GanttColumn Field="Id"
Visible="false">
</GanttColumn>
<GanttColumn Field="Title"
Expandable="true"
Width="160px"
Title="Task Title" >
</GanttColumn>
<GanttColumn Field="PercentComplete"
Width="60px">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px"
TextAlign="@ColumnTextAlign.Right">
</GanttColumn>
<GanttColumn Field="End"
DisplayFormat="End: {0:d}"
Width="100px">
</GanttColumn>
</GanttColumns>
</TelerikGantt>
@code {
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
public int LastId { get; set; } = 1;
List<FlatModel> Data { get; set; }
protected override void OnInitialized()
{
Data = new List<FlatModel>();
var random = new Random();
for (int i = 1; i < 6; i++)
{
var newItem = new FlatModel()
{
Id = LastId,
Title = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 6 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = Math.Round(random.NextDouble(), 2)
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 6 + i + j),
End = new DateTime(2020, 12, 7 + i + j),
PercentComplete = Math.Round(random.NextDouble(), 2)
});
LastId++;
}
}
base.OnInitialized();
}
}
Customization
You can customize the default Filter Menu behavior for each column through the following property the GanttColumn exposes:
| Parameter | Type and Default Value | Description |
|---|---|---|
DefaultFilterOperator |
FilterOperator |
Sets the default filter operator in the column it is declared for. Accepts a member of the FilterOperator enum. The selected operator must be applicable for the specific data type Check the supported options in the Filter Operators article. The provided default filter operator will be applied for both filters in the menu. |
FilterOperators |
List<FilterListOperator> |
Specifies the available operators. Must contain only supported filter operators for the specific data type. If not defined, the component will use a default list of available operators based on the field type. |
Configure the Filter Menu
@*Customize the Filter Menu*@
@using Telerik.DataSource
<TelerikGantt Data="@Data"
@bind-View="@SelectedView"
FilterMode="@GanttFilterMode.FilterMenu"
Width="1000px"
Height="600px"
IdField="Id"
ParentIdField="ParentId">
<GanttColumns>
<GanttColumn DefaultFilterOperator="FilterOperator.StartsWith"
Field="Title"
Expandable="true"
Width="160px"
Title="Task Title">
</GanttColumn>
<GanttColumn DefaultFilterOperator="FilterOperator.IsEqualTo"
Field="PercentComplete"
Title="Status"
Width="60px">
</GanttColumn>
<GanttColumn DefaultFilterOperator="FilterOperator.IsGreaterThanOrEqualTo"
Field="Start"
Width="100px"
DisplayFormat="{0:d}">
</GanttColumn>
<GanttColumn DefaultFilterOperator="FilterOperator.IsLessThanOrEqualTo"
Field="End"
Width="100px"
DisplayFormat="{0:d}">
</GanttColumn>
</GanttColumns>
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
</GanttViews>
</TelerikGantt>
@code {
public GanttView SelectedView { get; set; } = GanttView.Week;
List<FlatModel> Data { get; set; }
class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
public int LastId { get; set; } = 1;
protected override void OnInitialized()
{
Data = new List<FlatModel>();
var random = new Random();
for (int i = 1; i < 6; i++)
{
var newItem = new FlatModel()
{
Id = LastId,
Title = "Task " + i.ToString(),
Start = new DateTime(2021, 7, 5 + i),
End = new DateTime(2021, 7, 11 + i),
PercentComplete = Math.Round(random.NextDouble(), 2)
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Task " + i + " : " + j.ToString(),
Start = new DateTime(2021, 7, 5 + j),
End = new DateTime(2021, 7, 6 + i + j),
PercentComplete = Math.Round(random.NextDouble(), 2)
});
LastId++;
}
}
base.OnInitialized();
}
}