How to Automatically Scroll to Today's Date on Load in @syncfusion/ej2-react-gantt?

I am using `@syncfusion/ej2-react-gantt` to display my project and its task details. I want the Gantt chart to automatically scroll to today's date when the page loads, instead of the start date of any task. I am new to using `ej2-react-gantt` and am still learning how to work with it.


Here is the [StackBlitz link to my project](https://stackblitz.com/edit/react-tigm2a?file=index.js ).


I tried the following code to achieve this, but it doesn't seem to work:


```js

  React.useEffect(() => {

    if (ganttRef.current) {

      ganttRef.current.scrollToDate(new Date());

    }

  }, []);

```


Can someone help me understand why this code isn't working and how I can make the Gantt chart scroll to today's date on load? Any guidance would be greatly appreciated!


2 Replies 1 reply marked as answer

AG Ajithkumar Gopalakrishnan Syncfusion Team August 27, 2024 09:31 AM UTC

Hi Belt Basya,

Greetings from Syncfusion Support.

To achieve your requirement, we suggest using the `dataBound` event and `scrollToDate` method in the Gantt chart. The `dataBound` event triggers when the Gantt Chart component is populated with data. After that, you can use `scrollToDate` with the current date passed, to scroll the chart timeline horizontally to a specific date or time asynchronously. We have attached a code snippet and a sample for reference.

<GanttComponent

         ref={gantt => ganttInstance = gantt}

         ...

         dataBound={dataBound}

       >

         ...

</GanttComponent>

function dataBound()

{

    ganttInstance.scrollToDate(new Date());

}


You can find a working example on StackBlitz.



For more information, you may refer to the following link:

https://ej2.syncfusion.com/react/documentation/gantt/scrolling#scroll-to-date-method

If you have any further questions or need additional assistance, please let me know!

Regards,

Ajithkumar G


Marked as answer

BB Belt Basya August 27, 2024 02:06 PM UTC

Thank you so much. It is working. 


Loader.
Up arrow icon