Starting with a particular date range in view on initial load

[Lisa Scheibner]

How to I specify that I want the chart to load in at some specific date range that will change over time? (e.g. Last month and the upcoming quarter)

[Monisha Sivanthilingam]

Hi Lisa, 

 

Greetings from Syncfusion support. 

 

By using the dataBound event and scrollToDate function available in Gantt, you can load the Gantt Chart in a particular time range you want. The following code snippets demonstrate the solution. 

 

App.vue 

 

<ejs-gantt 

      id="gantt" 

      ref="gantt" 

      :dataSource="data" 

      :resources="resources" 

      :taskFields="taskFields" 

      :resourceFields="resourceFields" 

      :height="height" 

      :projectStartDate= "projectStartDate" 

      :projectEndDate= "projectEndDate" 

      :dataBound="dataBound" 

    > 

    </ejs-gantt> 

 

 

dataBound: function(args) { 

  if (args.hasOwnProperty("isGanttCreated")) { 

     var ganttChart = document.getElementById('gantt').ej2_instances[0]; 

     ganttChart.scrollToDate("05/08/2019"); 

 }  

} 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.