Best pracities/optimizations trick for Gantt

[RolJan]

Dear Syncfusion Team,

We are using Gantt component for quite some time and after many customer complaints we've decided to fix some bugs on our side/redesign and reach out to you for best practices.

 

Currently we are using Gantt with following configuration:

- customers are loading thousand of tasks on each API call - our best recommendation now is to use virtual scrolling in such case (as loading it all once is killing RAM and application).

- some customers used Varchars as ParentId - this also seems not to be very supported by Your solutions.

- on our side we are mapping data to Admin selected type (e.g. numbers/dates with appropriate cultures).

- We structure data (parent/child) with ParenId - so any references/connections are build within your code on customer browser (?) - is there a way to do it more efficient? (I've seen examples that it's possible to work with array of child - ?) - we accept data from many sources and do not have access to production DBs - so we can't now change how it works, but we can implement some better-future solutions.

In other words - we are learning the hard way how to handle large amounts of data - please share with us the best examples/ways of handling such scenarios, or clues what we should avoid/do not recommend.

Looking forward to

[Udhayakumar Anand]

Hi RolJan

Please find your query response below

Query 1 : customers are loading thousand of tasks on each API call	We reviewed your provided image and noticed that you've bound dataBound in the source, dataBound triggers on every scroll, so any dom manipulation inside the event will affect the performance, so could you please tell us what you're trying to achieve inside the event, which will help us provide you with a better solution?
Query 2 : some customers used Varchars as ParentId	If you were wondering whether you could declare parentId as a string, the answer is yes. We added support for this feature in v 20.3.47, so please use a similar or higher version of the gantt component.                       If this is not what you're looking for, please provide more information about your problem.   Code Snippet of the issue you’ve reported Video demonstration of the issue Could you please modify the sample link provided and replicate the issue, which will be helpful for us to validate further . Share us screenshot of how datasource has been bound to ParentID values. Sample Link : https://stackblitz.com/edit/angular-rlrjoh?file=src%2Fdata.ts
Query 3 : We structure data (parent/child) with ParenId	We have maintained the Hierarchical structure(parent-child relationship with Self-reference datastructure(flat Data) which is more efficient that Hierarchical binding.   To interact with the database ParentId mapping is the best way to go for better performance. If you use child mapping, it will be difficult to communicate with the database, so we recommend you use ParentId mapping.

Best Practice For Gantt

1. Avoid writing the function within the event that will trigger on the load time, as this will significantly improve the rendering time of gantt.
2. Please avoid providing an invalid predecessor in the data source, which will also improve gantt performance by avoiding validating a large amount of data.

Regards,

Udhayakumar

[RolJan]

Hello,

 Thank you for detailed answer.

Query 1 : customers are loading thousand of tasks on each API call - dataBound -  please tell us what you're trying to achieve inside the event	In dataBound there is a custom implementation of 'CurrentTimeTimeMarker' - based on view - there is a Time Marker for current time indication.
Query 2 : some customers used Varchars as ParentId	We were using strings as TaskId, but for numerics, our customer used data in such format: taskID: '100010 -ABCDEFGH??!', Which is reflected in this example: Parent/child structure is maintained - but the representation on right side does not follow when expaneded/collapsed https://stackblitz.com/edit/angular-rlrjoh-f7elze?file=src%2Fdata.ts
Query 3 : We structure data (parent/child) with ParenId	Thank you for clarification.

[RolJan]

Additionaly - is there a way to efficently load large data set to Gantt without virtual scrolling?

With 700 tasks - Angular app stops for few minutes (to render tasks) and then it is slow anyway.

Is is just that after X amounts of tasks it's not u

[Udhayakumar Anand]

Hi RolJan

Please find your query response below

Issue 1 : In dataBound there is a custom implementation of 'CurrentTimeTimeMarker' - based on view - there is a Time Marker for current time indication.	In order to address this issue, we recommend using the 'created' event instead of the 'databound' event. This will improve the performance of the Gantt chart and prevent the 'CurrentTimeTimeMarker' from being updated for every action.
Issue 2 representation on right side does not follow when expaneded/collapsed	After reviewing your query, we have found that the problem is being caused by the use of spaces when declaring TaskId. To resolve this issue, we suggest using any other symbol instead of a space.   we have updated the sample code with the solution. You can find the updated sample code below.   Sample Link : https://stackblitz.com/edit/angular-rlrjoh-rc2djn?file=src%2Fdata.ts,src%2Fapp.component.ts
Issue 3 : is there a way to efficently load large data set to Gantt without virtual scrolling?	Other than virtual scroll, we currently have no other option to make gantt load faster.

Regards,

Udhayakumar