Premium support for our pure JavaScript UI components


Post by natasha.osipenko »

Hi, please find attached updated app.
As I mentioned, I have a requirement to implement 'today', 'current week' (including today), 'current month' (including today), 'current year' (including today) views.
(If user selects a view then gantt should show appropriate timerange)
How I implemented it? I change viewPreset programmatically - to reproduce click buttons 'd', 'w', 'm', 'y' above the gantt.
First question - is it correct approach to do like this? Maybe I should use totally different approach?
If approach is ok, when I change viewPreset then gantt shows 'day', 'week', 'month', 'year' view, but not current
I asked how to show current. marcio answered that I should use setTimeSpan function.
I asked what event should I listen to to apply setTimeSpan after viewPreset change. You answered dateRangeChange event.
But it's NOT triggered after viewPreset changed programmatically
How to reproduce in attached app:

  • click 'd', 'w', 'm', 'y' buttons above the gantt -> viewPreset is changed, but event is not triggered.

Could you please check and tell what I do wrong?

Attachments
advanced.zip
(2.23 MiB) Downloaded 20 times

Post by alex.l »

Actually yes, you did it different way than we suggested/expected. viewPreset is a property to create own custom preset and not use one of pre-defined presets from https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-presets , which are zoom levels at the same time. So in your code you are making new custom viewPreset every time. Try to zoom the timeline with mouse wheel or using context menu of timeline header. You'll see the event triggered.
If you want to go the way you choose and change viewPreset as you did, just ad ganttRef.current.instance.setTimeSpan(new Date()) right after you set viewPreset in button handler, you don't need any event at all.

To go the way we recommended, change zoomLevel using API https://bryntum.com/products/gantt/docs/api/Scheduler/view/mixin/TimelineZoomable#function-zoomToLevel
In this case you'll have event triggered.

Example:

ganttRef.current.instance.zoomToLevel('monthAndYear');

All the best,
Alex


Post by natasha.osipenko »

Thanks a lot!


Post Reply