Category / Section
How to filter a column in Gantt.
1 min read
In Gantt, it is possible to filter a column or you can apply a filter query on a specific column by using the filterContent method.
The below instance will explain on how to filter the resource column in resource view Gantt by using the filterContent method.
Please refer the following code example for this.
<div id="dropdown">
<input type="text" id="resouceColumn" />
</div>
<script type="text/javascript">
$(function () {
$("#resourceGantt").ejGantt({
dataSource: resourceGanttData,
//…
// Initializing the dropdownlist on create event with resource data from Gantt
create: function () {
var obj = $("#resourceGantt").ejGantt("instance");
var data = obj.model.resources;
$('#resouceColumn').ejDropDownList({
dataSource: data,
beforePopupHide: function (args) {
var obj = $("#resourceGantt").ejGantt("instance");
var value = args.text.split(',');
var predicate;
if (value && args.text.length) {
for (var i = 0; i < value.length; i++) {
if (predicate) {
predicate = predicate.or("eResourceName",
ej.FilterOperators.equal,
value[i], false);
} else {
predicate = ej.Predicate("eResourceName",
ej.FilterOperators.equal,
value[i], false);
}
}
obj.clearFilter();
obj.filterContent(predicate);
}
else {
obj.clearFilter();
}
},
fields: { text: "resourceName" },
watermarkText: "Select the resources",
showCheckbox: true,
width: 250
});
}
});
});
</script>
Gantt with filter query applied for resource column as Janet Leverling
You can find a Gantt sample to filter the resource column in resource allocation view here.
In the above sample we had filtered the resource column based upon the dropdown selection. The drop down has the list of resource names available in Resource column.
