This sample demonstrates the load on-demand data binding support in Gantt Chart. It allows users to load parent records alone on load time. Child records render on demand during expansion action.
Task ID | Task Name | Start Date | Duration | Progress |
|---|---|---|---|---|
| 1 | Task 1 | 1/3/2000 | 15 days | 43 |
| 5 | Task 5 | 1/3/2000 | 15 days | 25 |
| 9 | Task 9 | 1/3/2000 | 15 days | 92 |
| 13 | Task 13 | 1/3/2000 | 15 days | 32 |
| 17 | Task 17 | 1/3/2000 | 15 days | 54 |
| 21 | Task 21 | 1/3/2000 | 15 days | 33 |
| 25 | Task 25 | 1/3/2000 | 15 days | 8 |
| 29 | Task 29 | 1/3/2000 | 15 days | 73 |
| 33 | Task 33 | 1/3/2000 | 15 days | 99 |
| 37 | Task 37 | 1/3/2000 | 15 days | 57 |
| 41 | Task 41 | 1/3/2000 | 15 days | 91 |
| 45 | Task 45 | 1/3/2000 | 15 days | 59 |
| 49 | Task 49 | 1/3/2000 | 15 days | 95 |
| 53 | Task 53 | 1/3/2000 | 15 days | 93 |
| 57 | Task 57 | 1/3/2000 | 15 days | 25 |
| 61 | Task 61 | 1/3/2000 | 15 days | 34 |
| 65 | Task 65 | 1/3/2000 | 15 days | 93 |
| 69 | Task 69 | 1/3/2000 | 15 days | 10 |
| 73 | Task 73 | 1/3/2000 | 15 days | 50 |
| 77 | Task 77 | 1/3/2000 | 15 days | 11 |
| 81 | Task 81 | 1/3/2000 | 15 days | 49 |
| 85 | Task 85 | 1/3/2000 | 15 days | 93 |
02/01/2000 | 09/01/2000 | 16/01/2000 | 23/01/2000 | 30/01/2000 | 06/02/2000 | 13/02/2000 | 20/02/2000 | 27/02/2000 | 05/03/2000 | 12/03/2000 | 19/03/2000 | 26/03/2000 | 02/04/2000 | 09/04/2000 | 16/04/2000 | 23/04/2000 | 30/04/2000 | 07/05/2000 | 14/05/2000 | 21/05/2000 | 28/05/2000 | 04/06/2000 | 11/06/2000 | 18/06/2000 | 25/06/2000 | 02/07/2000 | 09/07/2000 | 16/07/2000 | 23/07/2000 | 30/07/2000 | 06/08/2000 | 13/08/2000 | 20/08/2000 | 27/08/2000 | 03/09/2000 | 10/09/2000 | 17/09/2000 | 24/09/2000 | 01/10/2000 | 08/10/2000 | 15/10/2000 | 22/10/2000 | 29/10/2000 | 05/11/2000 | 12/11/2000 | 19/11/2000 | 26/11/2000 | 03/12/2000 | 10/12/2000 | 17/12/2000 | 24/12/2000 | 31/12/2000 | 07/01/2001 | 14/01/2001 | 21/01/2001 | 28/01/2001 | 04/02/2001 | 11/02/2001 | 18/02/2001 | 25/02/2001 | 04/03/2001 | 11/03/2001 | 18/03/2001 | 25/03/2001 | 01/04/2001 | 08/04/2001 | 15/04/2001 | 22/04/2001 | 29/04/2001 | 06/05/2001 | 13/05/2001 | 20/05/2001 | 27/05/2001 | 03/06/2001 | 10/06/2001 | 17/06/2001 | 24/06/2001 | 01/07/2001 | 08/07/2001 | 15/07/2001 | 22/07/2001 | 29/07/2001 | 05/08/2001 | 12/08/2001 | 19/08/2001 | 26/08/2001 | 02/09/2001 | 09/09/2001 | 16/09/2001 | 23/09/2001 | 30/09/2001 | 07/10/2001 | 14/10/2001 | 21/10/2001 | 28/10/2001 | 04/11/2001 | 11/11/2001 | 18/11/2001 | 25/11/2001 | 02/12/2001 | 09/12/2001 | 16/12/2001 | 23/12/2001 | 30/12/2001 | 06/01/2002 | 13/01/2002 | 20/01/2002 | 27/01/2002 | 03/02/2002 | 10/02/2002 | 17/02/2002 | 24/02/2002 | 03/03/2002 | 10/03/2002 | 17/03/2002 | 24/03/2002 | 31/03/2002 | 07/04/2002 | 14/04/2002 | 21/04/2002 | 28/04/2002 | 05/05/2002 | 12/05/2002 | 19/05/2002 | 26/05/2002 | 02/06/2002 | 09/06/2002 | 16/06/2002 | 23/06/2002 | 30/06/2002 | 07/07/2002 | 14/07/2002 | 21/07/2002 | 28/07/2002 | 04/08/2002 | 11/08/2002 | 18/08/2002 | 25/08/2002 | 01/09/2002 | 08/09/2002 | 15/09/2002 | 22/09/2002 | 29/09/2002 | 06/10/2002 | 13/10/2002 | 20/10/2002 | 27/10/2002 | 03/11/2002 | 10/11/2002 | 17/11/2002 | 24/11/2002 |
|---|
S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
|---|
Load on demand and virtualization support is used to render a large number of tasks in the Gantt Chart with an effective performance. And so, in this demo, row virtualization is enabled with remote data binding which has 50,000 records. With the virtualization feature enabled in remote data binding, only the root level records are fetched from the remote server at the initial load time. So, need to set the hasChildMapping property of taskFields that denotes whichever records have child records and set loadChildOnDemand property as false. When expanding the root parent node or scrolling vertically, the corresponding tasks are dynamically fetched from the remote server and then updated in the DOM based on the current viewport position.