Premium support for our pure JavaScript UI components


Post by 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
Screenshot 2023-06-06 at 13.55.10.png (360.89 KiB) Viewed 422 times

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

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

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


Post by 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

Best regards,
Márcio


Post by natasha.osipenko »

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


Post by 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.

Best regards,
Márcio


Post by natasha.osipenko »

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


Post by 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.

All the best,
Alex


Post by 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


Post by 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.

All the best,
Alex


Post by 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?


Post by 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
Attachments
advanced.zip
(2.19 MiB) Downloaded 17 times

All the best,
Alex


Post Reply