Premium support for our pure JavaScript UI components


Post by taiki-fr »

Hi, as a followup to viewtopic.php?p=117916#p117916, I'm trying to also make it work in the other direction, so that scrolling or zooming the timeline will make the two date pickers update to show the current start and end of the timeline view.

It looks like the visibleDateRangeChange event is what we're supposed to use for this. I'm passing a handler that captures the start/end dates and storing them in React state, then feeding those states to my two date pickers (example code below). However, I'm seeing an issue with the startDate and endDate contained in the event - they are pointing to a date range that is wider than what the timeline is displaying.

This is causing a weird interaction since when I use the date pickers to change the start/end as described in the other thread, it makes a visibleDateRangeChange event fire with different start/end times than what was passed to the zoomToSpan, which in turn makes the date picker immediately update to a different value from what I just entered into it. Could you advise whether I'm doing something wrong here? Here's a rough excerpt of my code so far:

const [viewStartDate, setViewStartDate] = useState<Date | undefined>()
const [viewEndDate, setViewEndDate] = useState<Date | undefined>()
const [dateRangeUpdated, setDateRangeUpdated] = useState(false)

const handleDateRangeChange = useRef(
    throttle(
      (event: any) => {
        setViewStartDate(event.startDate)
        setViewEndDate(event.endDate)
        setDateRangeUpdated(false)
      },
      500)
  ).current
  
const ganttRef = useRef<BryntumGantt>(null) const ganttInstance = ganttRef.current?.instance useEffect(() => { if ( isDefined(viewStartDate) && isDefined(viewEndDate) && dateRangeUpdated ) { ganttInstance?.zoomToSpan({ startDate: viewStartDate, endDate: viewEndDate }) setDateRangeUpdated(false) } }, [dateRangeUpdated, ganttInstance, viewEndDate, viewStartDate]) return ( // [...] <DatePicker value={viewStartDate} onChange={(date) => { setViewStartDate(date) setDateRangeUpdated(true) }} /> <DatePicker value={viewEndDate} onChange={(date) => { setViewEndDate(date) setDateRangeUpdated(true) }} />
// [...] <BryntumGantt ref={ganttRef} // [...] onVisibleDateRangeChange={handleDateRangeChange} /> )

Cheers,
Taiki


Post by alex.l »

Hi Taiki,

I've reproduced this. I understand that it may be caused by the buffer area we use to render data that out of viewport bounds. But that should be working as expected imo. I've opened a ticket to investigate it deeply https://github.com/bryntum/support/issues/6128

All the best,
Alex


Post Reply