[REACT] Filter Gantt tasks based on the selected histogram bar

[dragan@spectrerp.com]

Hi!

Setup - Bryntum Gantt with ResourceHistogram. The histogram and Gantt are linked as partners. Similar to this example https://bryntum.com/products/gantt/examples/frameworks/react/javascript/resource-histogram/build/.

I'm trying to implement a feature where when a user double-clicks on a histogram bar in the ResourceHistogram, the Gantt chart filters to show only tasks that fall within that date range.

Specifically, this is what I'm trying to achieve:

• Capture the date range of the specific bar the user clicked on
• Filter the Gantt tasks to only show those that fall within or overlap that date range
• Ensure parent tasks are only included if they have at least one child task in the date range

What's the best way to go about this?

[alex.l]

Hi,

Capture the date range of the specific bar the user clicked on

You'll need to add a hook to make scheduleClick event working:

histogram.timeCellSelector = '.b-sch-timeaxis-cell';

histogram.on('scheduleClick', ({ tick }) => {
	// tick.startDate
	// tick.endDate
}

https://bryntum.com/products/gantt/docs/api/Scheduler/view/mixin/SchedulerDomEvents#event-scheduleClick

Filter the Gantt tasks to only show those that fall within or overlap that date range

https://bryntum.com/products/gantt/docs/api/Gantt/data/TaskStore#function-addFilter

Ensure parent tasks are only included if they have at least one child task in the date range

Implement it in filter method to check children and parents.

[alex.l]

I've opened a ticket to make scheduleClick working out of the box https://github.com/bryntum/support/issues/11331

[trunggosei]

I've opened a ticket to make scheduleClick working out of the box https://github.com/bryntum/support/issues/11331

histogram.timeCellSelector = '.b-sch-timeaxis-cell';

histogram.on('scheduleClick', ({ tick }) => {
	// tick.startDate
	// tick.endDate
}

I used this code you provided, but since I'm coding in TypeScript, it throws a TypeScript error when running yarn build. However, the chart still works fine when running yarn start
Do you have any suggestions for the TypeScript the code above?

[marcio]

Hey trunggosei,

Which error are you getting?

You can use @ts-ignore as a workaround while the ticket is not solved.