HelpBot Assistant

How can I help you?

Menu filtering in Gantt control

21 Dec 20224 minutes to read

The Gantt control provides the menu filtering support for each column. You can enable the filter menu by setting the AllowFiltering to true. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators.

<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>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

NOTE

The AllowFiltering property should be set to true to enable the filter menu. Setting the Columns.AllowFiltering property to false prevents rendering filter menu for a particular column.

Custom component in filter menu

The column.filter.ui is used to add custom filter components to a particular column.
To implement a custom filter UI, define the following functions:

  • create: Creates a custom component.
  • write: Wire events for a custom component.
  • read: Read the filter value from the custom component.

In the following sample, the dropdown is used as a custom component in the TaskName column.

<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-columns>
        <e-gantt-column field="TaskId" headerText="Task Id" width="120"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Task Name" textAlign="Right" width="100"> 
            <e-filter>
                <ui create="create" write="write" read="read"></ui>
            </e-filter>
        </e-gantt-column>
        <e-gantt-column field="StartDate" headerText="Start Date" width="120"></e-gantt-column>       
        <e-gantt-column field="EndDate" headerText="End Date" width="100"></e-gantt-column>
        <e-gantt-column field="Duration" headerText="Duration" width="100"></e-gantt-column>
        <e-gantt-column field="Progress" headerText="Progress" width="100"></e-gantt-column>
    </e-gantt-columns>

</ejs-gantt>

<script>

var dropInstance;
function create (args) {
    var db = new ej2.DataManager(ProjectNewData);
    var flValInput = createElement('input', { className: 'flm-input' });
    args.target.appendChild(flValInput);
    dropInstance = new ej2.DropDownList({
        dataSource: new ej2.DataManager(ProjectNewData),
        fields: { text: 'TaskName', value: 'TaskName' },
        placeholder: 'Select a value',
        popupHeight: '200px'
    });
    dropInstance.appendTo(flValInput);
}
function write (args) {
    dropInstance.value = args.filteredValue;
}
function read (args) {
    args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.value);
}

</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}