GanttChart Filtering
JavaScriptJavaScriptAngularAngularVueVueReactReact

Filtering

Smart.GanttChart component allows filtering of tasks and resources. In order to filter the GanttChart items the user has to use the filter input(s) that are displayed inside the Table header when filtering is enabled. The default filtering mode allows to filter by all columns whilte the advanced filterRow offers more specific filters for each individual column. The following properties are available for filtering:

  • taskFiltering - boolean property. When enabled a filter input is displayed above the Task Table header. Entering text inside the input triggers the tasks filtering. As a result only the tasks that correspond to the filter criteria are displayed.

    Here's how to enable taskFiltering:

    ganttChart.taskFiltering = true
  • resourceFiltering - boolean property. When enabled a filter input is displayed above the Resource Table header. Entering text inside the input triggers resource filtering. As a result only the resources that correspond to the filter criteria are displayed.

    Here's how to enable resourceFiltering:

    ganttChart.resourceFiltering = true
  • filterRow - boolean property. This property enables advanced filtering for the Task Panel. A filter row is displayed instead of the filter input. The filter row is positioned below the table header and allows to filter the tasks by column. FilterRow is only available for Task filtering.

    Here's how to enable filterRow:

    ganttChart.filterRow = true
For AI tooling

Developer Quick Reference

Topic: gantt-filtering   Component: GanttChart   Framework: JavaScript

Main methods: (none detected)

Common config keys: filtering

Implementation Notes

Compatibility: Modern browsers / Web Components   API access pattern: const component = document.querySelector(...) + component.method()

Lifecycle guidance: Initialize configuration first, then invoke imperative API when element is available in DOM.

Common pitfalls:

  • Calling methods before element initialization.
  • Reassigning large configuration partially without understanding merge behavior.
  • Missing required module script import for component type.

Validation checklist:

  • Ensure module scripts and CSS are loaded once.
  • Keep data schema aligned with columns/series definitions.
  • Verify method calls target initialized component instance.