1. Home
  2. Forum
  3. React - EJ 2
  4. Make Gantt chart load items on navigating to next/prev time span

Make Gantt chart load items on navigating to next/prev time span

Hi,

We are going to use the Gantt component which loads jobs and tasks from a remote data source. Is it possible to configure the component so that it requests the server as the user navigates to the next or previous time span (by adding some parameters like ?startdate=&endDate=)? We have a lot of jobs/tasks and loading  all of them at once might dramatically degrade the performance.

Thanks in advance.

7 Replies
PP Pooja Priya Krishna Moorthy Syncfusion Team May 6, 2020 05:06 PM UTC

Hi Dmitry, 
We can pass additional parameter to the data request by using the addParams method of Query class. Please refer the below documentation link. 
Also we need some more information? Do you want to make request with additional parameter for each time when the user navigate to the next and previous time span. 

Regards, 
Pooja K 


DV Dmitry Vorobyev May 18, 2020 10:03 AM UTC

Hi Pooja,

Thanks for your answer. Yes, we need to make a request to the server and fetch another piece of data every time the user navigates to the next or previous time span. Just don't want to load the tasks that are not on the current timespan. Do you have a code sample for doing so?

And another question that we've just had: does the Gantt component allow to programmatically set a timespan for a specific task? The usage scenario is as follows: the user selects one of the listed tasks on a dropdown and we want the component to navigate to a timespan containing that task. Is this possible and how?

Thanks in advance.

DV Dmitry Vorobyev May 19, 2020 07:51 AM UTC

Yet another question. Is it possible to specify time for a task's start and end dates, up to a minute? This applies to both editing a task by expanding/shrinking the task bar and add dialog's inputs, which seem to only provide date pickers by default.

Thanks.

PP Pooja Priya Krishna Moorthy Syncfusion Team May 19, 2020 01:40 PM UTC

Hi Dmitry, 
Please find the below response. 
S.No 
Query 
Syncfusion Comments 
 
1 
 
 
we need to make a request to the server and fetch another piece of data every time the user navigates to the next or previous time span. Just don't want to load the tasks that are not on the current timespan. 
 
 
Currently, we don’t have virtual rendering support for timeline. 
But we have already logged feature for this. You can track the status from below feedback link.  
 
As we have already lined up some major features, we could not start its implementation immediately. Please cast your vote to make it count. We will prioritize the features for every release based on demands. 
 
 
2 
 
does the Gantt component allow to programmatically set a timespan for a specific task? The usage scenario is as follows: the user selects one of the listed tasks on a dropdown and we want the component to navigate to a timespan containing that task. Is this possible and how? 
 
 
Yes, it is possible to focus on the task dynamically by using scrollToDate and setScrollTop method. 
Please find the below code example. 
 
onChange(args) { 
            this.ganttInstance.scrollToDate(args.itemData.StartDate); 
        this.ganttInstance.setScrollTop(args.itemData.index * this.ganttInstance.rowHeight); 
} 
render() { 
    return ( 
       <DropDownListComponent id="dropdown" change={this.onChange.bind(this)}/> 
     ); 
} 
 
 
In the provided sample, on change event of drop down list control, based on the value selected, we focused on the tasks. 
 
 
3 
 
 
Is it possible to specify time for a task's start and end dates, up to a minute? This applies to both editing a task by expanding/shrinking the task bar and add dialog's inputs, which seem to only provide date pickers by default. 
 
 
Yes, it is possible to set the date for taskbar up to minutes. We can also change the default edit type of column using editType property. Please find the below code example. 
export class Default extends SampleBase { 
  constructor() { 
     this.columns = [ 
        { field: 'TaskID' }, 
        { field: 'StartDate', editType: 'datetimepickeredit' }, 
        { field: 'EndDate', editType: 'datetimepickeredit' }, 
     ], 
  } 
} 
In taskbar editing, we cannot update the taskbar in minutes. But, by using datetimepicker, we can also select the time in both cell and dialog editing. 
 
 
 
Regards, 
Pooja K. 


DV Dmitry Vorobyev May 19, 2020 06:07 PM UTC

Thanks you so much for your comprehensive answers and sample code.

My last (hopefully) question is, what is the recommended way of propagating CRUD data to the remote server? I've added DataManager and UrlAdapter, specified url, insertUrl and updateUrl for the DataManager and then tried to add or alter a task, but no requests were sent to the insert or update urls. When I overrode the insert and update methods and set breakpoints, no breakpoints were hit during any of the CRUD operations. Does this means that the Gantt component just fetches the data but doesn't automatically propagate update, insert or remove requests? If yes, what's the recommended way of implementing those?

Thanks!

DV Dmitry Vorobyev May 19, 2020 06:20 PM UTC

Nevermind, I've just came across the Managing Tasks article and read about batchUrl. Thank you so much, your components package is great and we're about to purchase it! :)

PP Pooja Priya Krishna Moorthy Syncfusion Team May 20, 2020 04:53 AM UTC

Hi Dmitry, 
Thanks for the update. 
We are happy to hear that you are going to purchase. 😊 
Please get back to us if you would require any further assistance. 

Regards, 
Pooja K. 


Loader.
Up arrow icon