[REACT] Gantt change viewPreset but today should stay visible

[natasha.osipenko]

Hi,
I change viewPreset of Gantt manually according to user interaction.
Is it possible current date stay visible when viewPreset change.
For example, I have following

Screenshot 2023-06-06 at 13.55.10.png (360.89 KiB) Viewed 548 times

Then click "w" and set Gantt viewPreset to 'weekAndDay'.

Screenshot 2023-06-06 at 13.55.59.png (313.9 KiB) Viewed 548 times

I expect to see current week instead of future week.
Is it possible?

[marcio]

Hey natasha.osipenko,

You can try to use the following function to update the view start/end dates https://bryntum.com/products/gantt/docs/api/Scheduler/data/TimeAxis#function-setTimeSpan

But changing the preset actually shouldn't move to the future week, are you able to replicate that in one of our demos, or create a sample project for us to check that?? You can get more information about that here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

[natasha.osipenko]

Hi marcio, thanks for the answer!
What event listener (after viewPreset change) should I use to apply setTimeSpan?

[marcio]

Hey,

We recommend to test with the following one https://bryntum.com/products/gantt/docs/api/Scheduler/view/TimelineBase#event-dateRangeChange

Fired when the range of dates encapsulated by the UI changes. This will be when moving a view in time by reconfiguring its timeAxis. This will happen when zooming, or changing viewPreset.

[natasha.osipenko]

Hey,
Unfortunately, dateRangeChange event is not fired when change viewPreset

[alex.l]

Hi, I tested here https://bryntum.com/products/gantt/examples/advanced/
In console

gantt.on('dateRangeChange', ()=>console.log('viewPreset changed'))

After that I zoomed in/out with trackpad or with header menu and always have event triggered.
Please check that and provide steps to reproduce if you have scenario when it's not triggered.

[natasha.osipenko]

Hi,
Here is my code

const viewPreset = useMemo(() => {
    const base = (view === WEEK_VIEW && 'weekAndDay') ||
      (view === MONTH_VIEW && 'weekAndMonth') || (view === YEAR_VIEW && 'monthAndYear') ||
      (view === DAY_VIEW && 'hourAndDay') || 'dayAndWeek'
    return {
      base,
    }
}, [view])

<BryntumGantt
	...
          viewPreset={viewPreset}
          ref={ganttRef}
          listeners={{
            dateRangeChange: () => {
              ganttRef.current.instance.setTimeSpan(new Date())
              ganttRef.current.instance.scrollTo(0)
            }
          }}
 />
 

dateRangeChange is fired with component initiation. And not fired if viewPreset is changed through the code

[alex.l]

I see all working as expected in our demo code, please see an app attached. We need your full runnable application to debug.

[natasha.osipenko]

Hi,
It's complex to add my full running app)
In your example you use zoom and event is triggered.
But in my app I don't use zoom, I just changed viewPreset programmatically according to what user selects (please see my code above). And event is not triggered...

In general, I need to implement 'day', 'week', 'month', 'year' views for gantt (please see toggle group on my first screenshot)
Is it right to change viewPreset programmatically for this? Like below

const viewPreset = useMemo(() => {
    const base = (view === WEEK_VIEW && 'weekAndDay') ||
      (view === MONTH_VIEW && 'weekAndMonth') || (view === YEAR_VIEW && 'monthAndYear') ||
      (view === DAY_VIEW && 'hourAndDay') || 'dayAndWeek'
    return {
      base,
    }
}, [view])

<BryntumGantt
  viewPreset={viewPreset}
/>
          

Or should I use a different approach?

[alex.l]

I've attached runnable code with listener added as on your code snippet. Please see it's working well.
We need more details from you to reproduce this. Please try to replicate the issue in our example app, if no luck, we need you attach your runnable application.
TO run the app attached

npm i
npm start