Filtering in gantt control
21 Dec 202219 minutes to read
Filtering allows you to view specific or related records based on filter criteria. This can be done in the Gantt control by using the filter menu support and toolbar search support. To enable filtering in the Gantt control, set the AllowFiltering
to true
. Menu filtering support can be configured using the FilterSettings
property and toolbar searching can be configured using the SearchSettings
property.
Filter hierarchy modes
The Gantt supports a set of filtering modes with the FilterSettings.HierarchyMode
property. The following are the types of filter hierarchy modes available in the Gantt control:
-
Parent
: This is the default filter hierarchy mode in Gantt. The filtered records are displayed with its parent records. If the filtered records do not have any parent record, then only the filtered records will be displayed. -
Child
: Displays the filtered records with its child record. If the filtered records do not have any child record, then only the filtered records will be displayed. -
Both
: Displays the filtered records with its both parent and child records. If the filtered records do not have any parent and child records, then only the filtered records will be displayed. -
None
: Displays only the filtered records.
<ejs-dropdownlist id="mode" dataSource="@ViewBag.dropdata" width="250px" placeholder="Select a Mode" change="onModeChange" index="0" popupHeight="220px">
<e-dropdownlist-fields text="mode" value="id"></e-dropdownlist-fields>
</ejs-dropdownlist>
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowFiltering="true">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
</ejs-gantt>
<script>
function onModeChange(e) {
var ganttObj = document.getElementById("Gantt").ej2_instances[0];
var mode = e.value;
ganttObj.filterSettings.hierarchyMode = mode;
ganttObj.clearFiltering();
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
ViewBag.dropdata = new List<object>() {
new { id= "Parent", mode= "Parent" },
new { id= "Child", mode= "Child" },
new { id= "Both", mode= "Both" },
new { id= "None", mode= "None" },
};
return View();
}
Initial filter
To apply the filter at initial rendering, set the filter to predicate
object in the FilterSettings.Columns
property.
@{
List<object> filterColumns = new List<object>();
filterColumns.Add(new { field = "TaskName", matchCase = false, @operator = "startswith", predicate = "and", value = "Identify" });
filterColumns.Add(new { field = "TaskId", matchCase = false, @operator = "equal", predicate = "and", value = 2 });
}
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowFiltering="true">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-filterSettings columns="filterColumns"></e-gantt-filterSettings>
</ejs-gantt>
public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}
Filter operators
The filter operator for a column can be defined in the FilterSettings.Columns.Operator
property.
The available operators and its supported data types are:
Operator | Description | Supported Types |
---|---|---|
startswith | Checks whether the value begins with the specified value. | String |
endswith | Checks whether the value ends with the specified value. | String |
contains | Checks whether the value contains the specified value. | String |
equal | Checks whether the value is equal to the specified value. | String | Number | Boolean | Date |
notequal | Checks for the values that are not equal to the specified value. | String | Number | Boolean | Date |
greaterthan | Checks whether the value is greater than the specified value. | Number | Date |
greaterthanorequal | Checks whether the value is greater than or equal to the specified value. | Number | Date |
lessthan | Checks whether the value is less than the specified value. | Number | Date |
lessthanorequal | Checks whether the value is less than or equal to the specified value. | Number | Date |
NOTE
By default, the
FilterSettings.Columns.Operator
value isequal
Diacritics
By default, the Gantt control ignores the diacritic characters while filtering. To include diacritic characters, set the FilterSettings.IgnoreAccent
to true.
In the following sample, type Perform in the TaskName column to filter diacritic characters.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowFiltering="true">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-filterSettings ignoreAccent="true"></e-gantt-filterSettings>
</ejs-gantt>
public IActionResult Index()
{
ViewBag.DataSource = ganttData();
return View();
}
public static List<GanttDataSource> ganttData()
{
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
GanttDataSource Record1 = new GanttDataSource()
{
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site locàtion",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 1 },
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perförm soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
ResourceId = new int[] { 2, 3, 5 },
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil tëst appröval",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 50,
};
Record1.SubTasks.Add(Child1);
Record1.SubTasks.Add(Child2);
Record1.SubTasks.Add(Child3);
GanttDataSource Record2 = new GanttDataSource()
{
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
ResourceId = new int[] { 4 },
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Progress = 50,
ResourceId = new int[] { 4, 8 },
};
Record2.SubTasks.Add(Child4);
Record2.SubTasks.Add(Child5);
GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);
return GanttDataSourceCollection;
}
public class GanttDataSource
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int? Duration { get; set; }
public int Progress { get; set; }
public List<GanttDataSource> SubTasks { get; set; }
public int[] ResourceId { get; set; }
}
Filtering a specific column by method
You can filter the columns dynamically by using the filterByColumn
method.
<ejs-button id="filter" content="Filter TaskName column" cssClass="e-primary"></ejs-button>
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowFiltering="true">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
</ejs-gantt>
<script>
document.getElementById('filter').addEventListener('click', function (args) {
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.filterByColumn('TaskName', 'startswith', 'Iden');
});
</script>
public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}
Clear filtered columns
You can clear all the filtering condition done in the Gantt control by using the clearFiltering
method. The following code snippet explains the above behaviour.
<ejs-button id="clearFilter" content="Clear Filter" cssClass="e-primary"></ejs-button>
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowFiltering="true">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
</ejs-gantt>
<script>
document.getElementById('clearFilter').addEventListener('click', function (args) {
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.clearFiltering();
});
</script>
public IActionResult Index()
{
ViewBag.DataSource = GanttData.ProjectNewData();
return View();
}