Bryntum Support Forums

Thank you for requesting the development of a feature to make fillTicks configurable based on zoom levels.

While testing with the advanced example today, I had a question:
I noticed that the duration of a task can be set to either days or edays. Could you explain what edays means?

Additionally, after setting:
gantt.project.calendar = 'business';
gantt.project.hoursPerDay = 8;
when I change the duration unit from days to edays, it appears as though the day is fully filled, similar to when the fillTicks value is set to true.

Looking at the attached image, you can see that for days, there is some spacing from the grid, whereas for edays, it aligns perfectly with the grid.

I noticed that the duration of a task can be set to either days or edays. Could you explain what edays means?

edays are actually elapsed days. An elapsed day lasts for 24 hours. Tasks set with elapsed unit uses 24/7 calendars ignoring any other calendar and non working time. You can read about it here: https://bryntum.com/products/gantt/docs/guide/Gantt/whats-new/6.1.0#elapsed-duration-units-support

Additionally, after setting:
gantt.project.calendar = 'business';
gantt.project.hoursPerDay = 8;
when I change the duration unit from days to edays, it appears as though the day is fully filled, similar to when the fillTicks value is set to true.

That's because I said above a task with elapsed unit uses 24/7 calendar and 1 eday duration means it is gonna last a complete day irrespective of the calendar assigned earlier.

Hello, how have you been? The edays I asked about last time don’t seem to align well with the 8-hour-per-day method, so I’ve decided to put it on hold for now.

For a simpler solution, I’m planning to toggle the fillTicks option based on the zoom Level. While the toggle works correctly when zooming in/out using a button click, it doesn’t function properly when zooming in/out with the mouse wheel or using the zoom to fit feature.

Is there a way to frequently check the zoom Level or a listener to detect zoom events?

Hey,

Can you try listening to presetChange event, it is triggered after zoom changes the preset. Inside that event, you can get the zoomLevel and do your toggle operation accordingly.

The edays I asked about last time don’t seem to align well with the 8-hour-per-day method, so I’ve decided to put it on hold for now.

Can I ask what is the show stopper here?

Is there any sample code for using the onPresetChange event of presetChange? I’d like to see how to retrieve the zoomLevel information. Since I’m not a front-end developer, I need to request this feature from our front-end developer, but I couldn’t quite figure out how to use presetChange just by reading the documentation.

Reason for not using edays: In our company, a day is considered 8 hours, specifically from 9 AM to 6 PM. When using edays, it seems to calculate the elapsed time as 24 hours, regardless of the working hours. To better accommodate future scenarios like overtime or flexible working hours, I believe it’s more appropriate to adjust the fillTicks option based on the zoomLevel rather than using edays for now.

Hey cho jaehee,

You can add the event listener like this

listeners: {
        presetChange: ev => {
            console.log(ev)
        }
    }

And you can test it live on our demo https://bryntum.com/products/gantt/examples/basic/ as you can see in the attached recording.

Hello,

I have been implementing the logic to check the zoomLevel and adjust the fillTicks based on the listener you provided earlier. However, I am encountering an issue when zooming in and out using the mouse wheel.

When zooming in using the button, I can confirm that the zoomLevel increases, and when zooming out, the zoomLevel decreases. I took action on the fillTicks when the zoomLevel is 8.

However, as seen in the attached video, when zooming in and out using the mouse wheel, there is an issue. While zooming out, if I zoom in again, the zoomLevel should increase, but it decreases first before increasing (around 4–5 seconds in the video, the screen zoomsin but the zoomLevel shows 7, which is smaller than expected).

This issue does not occur when using the button, and it only happens when zooming in and out with the mouse wheel. Could you please check this for me?

Thank you!

※ modifiedSource*.png is a modified part of the Advanced demosample.

Hey there,

Try this instead:

    onPresetChange(e){
        console.log(e.source.zoomLevel)
    },

I have checked and it worked with the mouseWheel as well.