Bryntum Support Forums

Hi,

Current user experience
On a desktop computer with mouse the user is forced to use the arrows in the toolbar to move to right or left in the timeline (advanced example). On a laptop with trackpad you can partly move the gantt chart timeline to the right and left with two fingers. It only works to the right at load time. Works fine after pressing +/- zoom button and not at all pressing the "zoom to fit" button so not a consistent behavior.

Feature request

• It should be possible to drag the timeline to left and right with the mouse by left clicking and then dragging left or right.
• The default behavior should also be that it is always possible to scroll although e.g. pressing the "Zoom to fit" button

Regards
Johan

Is this what you mean? https://bryntum.com/products/gantt/docs/api/Scheduler/feature/Pan

Hi Mats,

Yes with one comment.The user experience with a default cross feels strange. Not sure what happens with that one when you are over a task. But a another way is to show the default arrow and then add a dragging hand once clicking on the gantt. Have you consider this?

Also the question is then now how to get the feature into Angular... The documentation is not that straight forward in that regard so it is a little bit guessing.

    //in the inline-data example ganttConfig below has a type script exception
    //strangely there is no typescript exception inthe  advanced example. But there is no difference so the feature is not working
  

  export const ganttConfig: Partial<GanttConfig> = {
    project : {
        // no data
    },

columns : [
    { type : 'wbs' },
    { type : 'name' }
],

subGridConfigs : {
    locked : {
        flex : 1
    },
    normal : {
        flex : 2
    }
},

features : {
    pan : true,
    eventDragCreate : false,
    timeRanges : {
        showCurrentTimeLine : true
    }
},

viewPreset : 'weekAndDayLetter',

columnLines : true
};

(property) eventDragCreate: boolean
Type '{ pan: true; eventDragCreate: false; timeRanges: { showCurrentTimeLine: true; }; }' is not assignable to type 'Partial<GanttFeaturesConfigType>'.
  Object literal may only specify known properties, and 'eventDragCreate' does not exist in type 'Partial<GanttFeaturesConfigType>'.ts(2322)
gantt.d.ts(12307, 9): The expected type comes from property 'features' which is declared here on type 'Partial<GanttConfig>'
 

Regards
/Johan

Here is docs with all features names in it https://bryntum.com/products/gantt/docs/guide/Gantt/integration/angular/guide#features
So it will be looking like:

  export const ganttConfig: Partial<GanttConfig> = {
    project : {
        // no data
    },

columns : [
    { type : 'wbs' },
    { type : 'name' }
],
panFeature : true,

About scrolling area. Timeline has start/end dates that you usually specify in initial config.
https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-startDate
https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-endDate
There is some info how it works in docs:

The end date of the timeline. If omitted, it will be calculated based on the startDate setting and the 'defaultSpan' property of the current viewPreset.

If a string is supplied, it will be parsed using DateHelper.defaultFormat

Note: If you need to set start and end date at the same time, use the setTimeSpan method.

When you zoom in / zoom out, start/end date will be recalculated.

To always have scroll, you can enable
https://bryntum.com/products/gantt/docs/api/Scheduler/view/mixin/TimelineScroll#config-infiniteScroll

Hi Alex,

We managed to add the scroll feature including infiniteScroll. But with the inifiniteScroll property enabled there are two regressions.

Pressing zoomToFit button or changing project start date the gantt chart gets focused in the middle of now where. Without inifiniteScroll the gantt tasks are centered which is the expected beavoiur.

Please see below our test project to recreate this as well as two gifs

https://agileupdatewin.s3.eu-west-2.amazonaws.com/debug/inline-data-v2.zip

Regards
Johan

That's a bug. Thank you for the test case, I've opened a ticket to fix this https://github.com/bryntum/support/issues/6032

Hi,

Is there any update on this one. I checked in 5.3.1 and it is not fixed.

This is a truly blocker if you use inifiniteScroll since you cannot change the project start date without completely confusing the user as described above. We have added bryntum to our solution and cannot release without this one.

https://github.com/bryntum/support/issues/6032

Regards
Johan

Hi Johan,

I understand how important to you to have it fixed asap. It's already marked as high-prio so it had top priority now. I pinged project management to make all possible to fix it asap, we will try to fix it during a week. Please subscribe on ticket updates to be notified when it's ready.
Thanks for your patience!

Hi,

Great! I did some more testing and can trigger the bug in the normal angular advanced demo so also without inifiniteScroll.

Thanks for the info, I added comment to the ticket