DayPilot.Gantt.onRowFilter

The onRowFilter event handler is called for each row when resolving a filter applied using rows.filter(). The default behavior is to keep all rows visible, and you can use this event to implement custom filter rules.

Available since 2022.4.5452.

Declaration

DayPilot.Gantt.onRowFilter(args)

Parameters

• args.task (DayPilot.Task) - row task object

• args.filterParam - custom filter object supplied by the rows.filter() method

• args.visible (boolean) - determines whether the row remains visible; default value is true

Notes

The event is evaluated for every row whenever rows.filter() is called. Leave args.visible unchanged to keep the row visible, or set it to false to hide rows that don't match your custom rule.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  onRowFilter: (args) => {
    const query = (args.filterParam?.text || "").toLowerCase();
    args.visible = args.task.text().toLowerCase().includes(query);
  },
  // ...
});
gantt.init();

gantt.rows.filter({ text: "design" });

Angular

<daypilot-gantt [config]="config"></daypilot-gantt>

config: DayPilot.GanttConfig = {
  onRowFilter: (args) => {
    const query = (args.filterParam?.text || "").toLowerCase();
    args.visible = args.task.text().toLowerCase().includes(query);
  },
  // ...
};

React

<DayPilotGantt
  onRowFilter={onRowFilter}
  {/* ... */}
/>

const onRowFilter = (args) => {
  const query = (args.filterParam?.text || "").toLowerCase();
  args.visible = args.task.text().toLowerCase().includes(query);
};

Vue

<DayPilotGantt
  @rowFilter="onRowFilter"
  <!-- ... -->
/>

const onRowFilter = (args) => {
  const query = (args.filterParam?.text || "").toLowerCase();
  args.visible = args.task.text().toLowerCase().includes(query);
};

See Also

DayPilot.Gantt.rows.filter()

DayPilot.Task Class

DayPilot.Gantt Class