javascript gantt chart row task filtering

You can apply a filter to the Gantt Chart component and display only rows/tasks that meet the specified criteria.

Available since 2022.4.5452.

JavaScript Gantt Chart

You can apply the filter using rows.filter() method:

dp.rows.filter("milestone");

The rows.filter() method accepts a single argument - a custom object that will be passed to onRowFilter event handler that resolves the criteria. Usually, it will be a string but it can also be a complex object (if you want to use multi-criteria filtering).

Whenever the rows.filter() method is called, the Gantt Chart component updates the view and filters the rows using onRowFilter event handler.

You must provide your own onRowFilter implementation that will apply the filter rule. By default, all rows are visible.

dp.onRowFilter = (args) => {
  const query = args.filterParam.query;

  if (!args.task.data.text.toUpperCase().includes(query.toUpperCase())) {
      args.visible = false;
  }

};

Calling rows.filter() without an argument will clear the filter:

dp.rows.filter();

Demo