[ANGULAR] Issue while dynamically scrolling to highlight a long running task

[pushkarajk_kloudgin]

Hi Team,
We have a requirement to highlight the task in the scheduler as an action from data shown in the bryntum-grid UI. For same day tasks it is scrolling to the event/resource and the highlight is wokring as expected. But below cases are failing while scrolling to the respective task.
CASE 1:
we have a long running task, e.g. the start date is 25th March, 2025 and end date is 9th April, 2025, then instead of scrolling to the event on current date it is highlighting the event on some middle date like 4th April, 2025.

CASE : 2
Also. if the long running task is in the past (start date : 2nd Feb, 2025, end Date : 25th March, 2025), then we are trying to scroll to the start date of the task but in the process the timeline is vanishing.

The code tried -
Approach 1

let eventRecord: any = this.schedulerComponent.instance.eventStore.getById(selectedEvent.id)
          let resourceRecord: any = this.schedulerComponent.instance.resourceStore.getById(crewid)
          await this.schedulerComponent.instance.scrollEventIntoView(eventRecord)
          let crewElement = this.schedulerComponent?.instance?.getElementFromEventRecord(eventRecord, resourceRecord)
if (crewElement) {
            crewElement.scrollIntoView({ behavior: "smooth", block: "center" });
}
//followed by the css change for applying blinking effect on highlight

Approach 2

//trying to use buffer hours to set the time span corectly
let eventRecord: any = this.schedulerComponent.instance.eventStore.getById(selectedEvent.id)
    let newDate = new Date(eventRecord.data.startDate)
      let endDate = new Date(eventRecord.data.startDate)
      endDate.setHours(endDate.getHours() + 5 + 2)
      instance.timeAxis.setTimeSpan(newDate, endDate)
      setTimeout(async () =>{
        let dateX = instance.getCoordinateFromDate(eventRecord.data.startDate)
        await instance.scrollable.scrollTo(dateX, null, { animate: true })
        instance.scrollRowIntoView(crewid)
},50)

Please, could you help us with this.
Bryntum Gantt version: 5.6.8
Angular version : 17

PFA - recording (the green background task shown in the recording is a long running task and is ending for the current date i.e. 9th April, 2025 and starting on 25th Marhc, 2025.)

[ghulam.ghous]

Hey,

Case 1: This is a bug, and I have opened a ticket to investigate this issue: https://github.com/bryntum/support/issues/11081
Case 2: I am not able to reproduce this, can you please me how I can reproduce the issue in this example here: https://bryntum.com/products/scheduler/examples/basic/

[pushkarajk_kloudgin]

Hey,
Thanks for the quick response.
The second case is happening when we are loading the data dynamically from an api call. I was facing this issue while implementing the 2nd approach. If I add a day's buffer then it is scrolling to the later date instead of the start date and if I add a buffer of few hours and set the time span axis then the timeline is vanishing.

[ghulam.ghous]

I am not able to reproduce it, can you please try in our online example maybe and provide us with exact steps, if not possible please provide a small runnable test case.

[pushkarajk_kloudgin]

Sure, will share a runnable code snippet for the same

[ghulam.ghous]

Sure. We will wait for that.

[pushkarajk_kloudgin]

Hey
Please, could you try the below code snippet. It produces a similar effect.

import { Scheduler } from '../../build/scheduler.module.js?484446';

const scheduler = new Scheduler({
    appendTo   : 'container',
    viewPreset : 'hourAndDay',
    tickSize   : 80,
    startDate  : new Date(2025, 3, 8, 9),   // Apr 8, 2025, 9 AM
    endDate    : new Date(2025, 3, 8, 17),  // Apr 8, 2025, 5 PM

columns : [
    { text : 'Name', field : 'name', width : 200 }
],

resources : [
    { id : 1, name : 'Resource 1' }
],

events : [
    {
        id         : 'long1',
        name       : 'Long Running Task',
        startDate  : new Date(2024, 0, 1), // Jan 1, 2024
        endDate    : new Date(2024, 6, 1), // Jul 1, 2024
        eventColor : 'red',
        resourceId : 1
    }
],

assignments : [
    { id: 'assign1', event: 'long1', resource: 1 }
]
});

// Force scroll to out-of-range event
setTimeout(() => {
    const coord = scheduler.getCoordinateFromDate(new Date(2024, 0,
1)); // Jan 1, 2024
    scheduler.scrollable.scrollTo(coord, null, { animate: true });
}, 300);

In our case, we are fetching the data from API and then we are trying to scroll to the task in the past date.

[tasnim]

I've applied the code, but not sure what steps I should follow to reproduce!
I'm seeing this

chrome_JYUAahZsx1.png (71.96 KiB) Viewed 250 times

Could you please provide some instructions what we need to do after?

[pushkarajk_kloudgin]

Hey
I added the same code in the below example :
https://bryntum.com/products/scheduler/examples/bigdataset/
PFA - screenshot of the issue reproduced.

Basically, when I am trying to scroll the gantt dynamically for a long running task in the past then I am seeing this issue.

[tasnim]

You can enable infiniteScroll https://bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#config-infiniteScroll, and you'll be able to scroll.