diff --git a/ej2-react-toc.html b/ej2-react-toc.html
index b2e763d2c..785ce590a 100644
--- a/ej2-react-toc.html
+++ b/ej2-react-toc.html
@@ -1075,6 +1075,7 @@
 </li><li>
     Gantt
     <ul>
+        <li><a href="/ej2-react/gantt/overview">Overview</a></li>
         <li>Getting Started
         <ul>
             <li><a href="/ej2-react/gantt/getting-started">React</a></li>
@@ -1082,6 +1083,7 @@
             <li><a href="/ej2-react/gantt/preact">Preact</a></li>
         </ul>
         </li>
+        <li><a href="/ej2-react/gantt/key-elements">Key Elements in Gantt UI</a></li>
         <li><a href="/ej2-react/gantt/module">Feature Modules</a></li>
         <li><a href="/ej2-react/gantt/data-binding">Data Binding</a>
             <ul>
@@ -1089,6 +1091,7 @@
                 <li><a href="/ej2-react/gantt/loading-animation">Loading Animation</a></li>
             </ul>
         </li>
+        <li><a href="/ej2-react/gantt/performance">Performance Best Practices</a></li>
         <li><a href="/ej2-react/gantt/columns/columns">Columns</a>
             <ul>
                 <li><a href="/ej2-react/gantt/columns/column-reordering">Column Reordering</a></li>
diff --git a/ej2-react/auto-complete/disabled-items.md b/ej2-react/auto-complete/disabled-items.md
index 4b2b43660..9ef5cbcaa 100644
--- a/ej2-react/auto-complete/disabled-items.md
+++ b/ej2-react/auto-complete/disabled-items.md
@@ -54,4 +54,4 @@ The [disableItem](https://ej2.syncfusion.com/react/documentation/api/auto-comple
 
 If you want to disabled the overall component to set the [enabled](https://ej2.syncfusion.com/react/documentation/api/auto-complete/#enabled) property to false.
 
-![Disabled AutoComplete Component](../images/autocomplete-disable.png)" 
\ No newline at end of file
+![Disabled AutoComplete Component](../images/autocomplete-disable.png)
\ No newline at end of file
diff --git a/ej2-react/code-snippet/gantt/resource-customization-cs1/app/App.jsx b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/App.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/ej2-react/code-snippet/gantt/resource-customization-cs1/app/App.tsx b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/App.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/ej2-react/code-snippet/gantt/resource-customization-cs1/app/datasource.jsx b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/datasource.jsx
new file mode 100644
index 000000000..5ab35b5c9
--- /dev/null
+++ b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/datasource.jsx
@@ -0,0 +1,198 @@
+export let projectResources = [
+    { resourceId: 1, resourceName: 'Project Manager' },
+    { resourceId: 2, resourceName: 'Software Analyst' },
+    { resourceId: 3, resourceName: 'Developer' },
+    { resourceId: 4, resourceName: 'Testing Engineer' }
+];
+export let data = [
+    {
+        taskID: 1,
+        taskName: 'Project schedule',
+        startDate: new Date('02/08/2019'),
+        endDate: new Date('03/15/2019'),
+        subtasks: [
+            {
+                taskID: 2,
+                taskName: 'Planning',
+                startDate: new Date('02/08/2019'),
+                endDate: new Date('02/12/2019'),
+                subtasks: [
+                    {
+                        taskID: 3, taskName: 'Plan timeline', startDate: new Date('02/08/2019'),
+                        endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
+                    },
+                    {
+                        taskID: 4, taskName: 'Plan budget', startDate: new Date('02/08/2019'),
+                        endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
+                    },
+                    {
+                        taskID: 5, taskName: 'Allocate resources', startDate: new Date('02/08/2019'),
+                        endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
+                    },
+                    {
+                        taskID: 6, taskName: 'Planning complete', startDate: new Date('02/10/2019'),
+                        endDate: new Date('02/10/2019'), duration: 0, predecessor: '3FS,4FS,5FS'
+                    }
+                ]
+            }, {
+                taskID: 7,
+                taskName: 'Design',
+                startDate: new Date('02/15/2019'),
+                endDate: new Date('02/19/2019'),
+                subtasks: [
+                    {
+                        taskID: 8, taskName: 'Software specification', startDate: new Date('02/15/2019'),
+                        endDate: new Date('02/17/2019'), duration: 3, progress: '60', predecessor: '6FS', resourceId: [2]
+                    },
+                    {
+                        taskID: 9, taskName: 'Develop prototype', startDate: new Date('02/15/2019'),
+                        endDate: new Date('02/17/2019'), duration: 3, progress: '100', predecessor: '6FS', resourceId: [3]
+                    },
+                    {
+                        taskID: 10, taskName: 'Get approval from customer', startDate: new Date('02/18/2019'),
+                        endDate: new Date('02/19/2019'), duration: 2, progress: '100', predecessor: '9FS', resourceId: [1]
+                    },
+                    {
+                        taskID: 11, taskName: 'Design complete', startDate: new Date('02/17/2019'),
+                        endDate: new Date('02/17/2019'), duration: 0, predecessor: '10FS'
+                    }
+                ]
+            },
+            {
+                taskID: 12,
+                taskName: 'Implementation phase',
+                startDate: new Date('02/25/2019'),
+                endDate: new Date('03/05/2019'),
+                subtasks: [
+                    {
+                        taskID: 13,
+                        taskName: 'Phase 1',
+                        startDate: new Date('02/25/2019'),
+                        endDate: new Date('03/07/2019'),
+                        subtasks: [{
+                                taskID: 14,
+                                taskName: 'Implementation module 1',
+                                startDate: new Date('02/25/2019'),
+                                endDate: new Date('03/07/2019'),
+                                subtasks: [
+                                    {
+                                        taskID: 15, taskName: 'Development task 1', startDate: new Date('02/22/2019'),
+                                        endDate: new Date('02/24/2019'), duration: 3, progress: '50', predecessor: '11FS', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 16, taskName: 'Development task 2', startDate: new Date('02/22/2019'),
+                                        endDate: new Date('02/24/2019'), duration: 3, progress: '50', predecessor: '11FS', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 17, taskName: 'Testing', startDate: new Date('02/25/2019'),
+                                        endDate: new Date('02/26/2019'), duration: 2, progress: '0', predecessor: '15FS,16FS', resourceId: [4]
+                                    },
+                                    {
+                                        taskID: 18, taskName: 'Bug fix', startDate: new Date('03/01/2019'),
+                                        endDate: new Date('03/02/2019'), duration: 2, progress: '0', predecessor: '17FS', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 19, taskName: 'Customer review meeting', startDate: new Date('03/03/2019'),
+                                        endDate: new Date('03/07/2019'), duration: 2, progress: '0', predecessor: '18FS', resourceId: [1]
+                                    },
+                                    {
+                                        taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('03/05/2019'),
+                                        endDate: new Date('03/05/2019'), duration: 0, predecessor: '19FS'
+                                    }
+                                ]
+                            }]
+                    },
+                    {
+                        taskID: 21,
+                        taskName: 'Phase 2',
+                        startDate: new Date('02/25/2019'),
+                        endDate: new Date('03/05/2019'),
+                        subtasks: [{
+                                taskID: 22,
+                                taskName: 'Implementation module 2',
+                                startDate: new Date('02/25/2019'),
+                                endDate: new Date('03/05/2019'),
+                                subtasks: [
+                                    {
+                                        taskID: 23, taskName: 'Development task 1', startDate: new Date('02/22/2019'),
+                                        endDate: new Date('02/25/2019'), duration: 4, progress: '50', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 24, taskName: 'Development task 2', startDate: new Date('02/22/2019'),
+                                        endDate: new Date('02/25/2019'), duration: 4, progress: '50', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 25, taskName: 'Testing', startDate: new Date('02/26/2019'),
+                                        endDate: new Date('03/01/2019'), duration: 2, progress: '0', predecessor: '23FS,24FS', resourceId: [4]
+                                    },
+                                    {
+                                        taskID: 26, taskName: 'Bug fix', startDate: new Date('03/02/2019'),
+                                        endDate: new Date('03/03/2019'), duration: 2, progress: '0', predecessor: '25FS', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 27, taskName: 'Customer review meeting', startDate: new Date('03/07/2019'),
+                                        endDate: new Date('03/09/2019'), duration: 2, progress: '0', predecessor: '26FS', resourceId: [1]
+                                    },
+                                    {
+                                        taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('03/03/2019'),
+                                        endDate: new Date('03/03/2019'), duration: 0, predecessor: '27FS'
+                                    }
+                                ]
+                            }]
+                    },
+                    {
+                        taskID: 29,
+                        taskName: 'Phase 3',
+                        startDate: new Date('02/25/2019'),
+                        endDate: new Date('03/07/2019'),
+                        subtasks: [{
+                                taskID: 30,
+                                taskName: 'Implementation module 3',
+                                startDate: new Date('02/25/2019'),
+                                endDate: new Date('03/07/2019'),
+                                subtasks: [
+                                    {
+                                        taskID: 31, taskName: 'Development task 1', startDate: new Date('02/22/2019'),
+                                        endDate: new Date('02/24/2019'), duration: 3, progress: '50', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 32, taskName: 'Development task 2', startDate: new Date('02/22/2019'),
+                                        endDate: new Date('02/24/2019'), duration: 3, progress: '50', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 33, taskName: 'Testing', startDate: new Date('02/25/2019'), endDate: new Date('02/26/2019'),
+                                        duration: 2, progress: '0', predecessor: '31FS,32FS', resourceId: [4]
+                                    },
+                                    {
+                                        taskID: 34, taskName: 'Bug fix', startDate: new Date('03/01/2019'), endDate: new Date('03/05/2019'),
+                                        duration: 2, progress: '0', predecessor: '33FS', resourceId: [3]
+                                    },
+                                    {
+                                        taskID: 35, taskName: 'Customer review meeting', startDate: new Date('03/03/2019'),
+                                        endDate: new Date('03/04/2019'), duration: 2, progress: '0', predecessor: '34FS',
+                                        resourceId: [1]
+                                    },
+                                    {
+                                        taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('03/02/2019'),
+                                        endDate: new Date('03/02/2019'), duration: 0, predecessor: '35FS'
+                                    },
+                                ]
+                            }]
+                    }
+                ]
+            },
+            {
+                taskID: 37, taskName: 'Integration', startDate: new Date('03/08/2019'), endDate: new Date('03/10/2019'), duration: 3,
+                progress: '0', predecessor: '20FS,28FS,36FS', resourceId: [3]
+            },
+            {
+                taskID: 38, taskName: 'Final testing', startDate: new Date('03/11/2019'), endDate: new Date('03/12/2019'), duration: 2,
+                progress: '0', predecessor: '37FS', resourceId: [4]
+            },
+            {
+                taskID: 39, taskName: 'Final delivery', startDate: new Date('03/10/2019'), endDate: new Date('03/10/2019'),
+                duration: 0, predecessor: '38FS'
+            }
+        ]
+    }
+];
diff --git a/ej2-react/code-snippet/gantt/resource-customization-cs1/app/datasource.tsx b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/datasource.tsx
new file mode 100644
index 000000000..0a95c38f3
--- /dev/null
+++ b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/datasource.tsx
@@ -0,0 +1,204 @@
+export let projectResources: Object[] = [
+    { resourceId: 1, resourceName: 'Project Manager' },
+    { resourceId: 2, resourceName: 'Software Analyst' },
+    { resourceId: 3, resourceName: 'Developer' },
+    { resourceId: 4, resourceName: 'Testing Engineer' }
+];
+
+export let data: Object[] = [
+    {
+        taskID: 1,
+        taskName: 'Project schedule',
+        startDate: new Date('02/08/2019'),
+        endDate: new Date('03/15/2019'),
+        subtasks: [
+            {
+                taskID: 2,
+                taskName: 'Planning',
+                startDate: new Date('02/08/2019'),
+                endDate: new Date('02/12/2019'),
+                subtasks: [
+                    {
+                        taskID: 3, taskName: 'Plan timeline', startDate: new Date('02/08/2019'),
+                        endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
+                    },
+                    {
+                        taskID: 4, taskName: 'Plan budget', startDate: new Date('02/08/2019'),
+                        endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
+                    },
+                    {
+                        taskID: 5, taskName: 'Allocate resources', startDate: new Date('02/08/2019'),
+                        endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
+                    },
+                    {
+                        taskID: 6, taskName: 'Planning complete', startDate: new Date('02/10/2019'),
+                        endDate: new Date('02/10/2019'), duration: 0, predecessor: '3FS,4FS,5FS'
+                    }
+                ]
+            }, {
+                taskID: 7,
+                taskName: 'Design',
+                startDate: new Date('02/15/2019'),
+                endDate: new Date('02/19/2019'),
+                subtasks: [
+                    {
+                        taskID: 8, taskName: 'Software specification', startDate: new Date('02/15/2019'),
+                        endDate: new Date('02/17/2019'), duration: 3, progress: '60', predecessor: '6FS', resourceId: [2]
+                    },
+                    {
+                        taskID: 9, taskName: 'Develop prototype', startDate: new Date('02/15/2019'),
+                        endDate: new Date('02/17/2019'), duration: 3, progress: '100', predecessor: '6FS', resourceId: [3]
+                    },
+                    {
+                        taskID: 10, taskName: 'Get approval from customer', startDate: new Date('02/18/2019'),
+                        endDate: new Date('02/19/2019'), duration: 2, progress: '100', predecessor: '9FS', resourceId: [1]
+                    },
+                    {
+                        taskID: 11, taskName: 'Design complete', startDate: new Date('02/17/2019'),
+                        endDate: new Date('02/17/2019'), duration: 0, predecessor: '10FS'
+                    }
+                ]
+            },
+            {
+                taskID: 12,
+                taskName: 'Implementation phase',
+                startDate: new Date('02/25/2019'),
+                endDate: new Date('03/05/2019'),
+                subtasks: [
+                    {
+                        taskID: 13,
+                        taskName: 'Phase 1',
+                        startDate: new Date('02/25/2019'),
+                        endDate: new Date('03/07/2019'),
+                        subtasks: [{
+                            taskID: 14,
+                            taskName: 'Implementation module 1',
+                            startDate: new Date('02/25/2019'),
+                            endDate: new Date('03/07/2019'),
+                            subtasks: [
+                                {
+                                    taskID: 15, taskName: 'Development task 1', startDate: new Date('02/22/2019'),
+                                    endDate: new Date('02/24/2019'), duration: 3, progress: '50', predecessor: '11FS', resourceId: [3]
+                                },
+                                {
+                                    taskID: 16, taskName: 'Development task 2', startDate: new Date('02/22/2019'),
+                                    endDate: new Date('02/24/2019'), duration: 3, progress: '50', predecessor: '11FS', resourceId: [3]
+                                },
+                                {
+                                    taskID: 17, taskName: 'Testing', startDate: new Date('02/25/2019'),
+                                    endDate: new Date('02/26/2019'), duration: 2, progress: '0', predecessor: '15FS,16FS', resourceId: [4]
+                                },
+                                {
+                                    taskID: 18, taskName: 'Bug fix', startDate: new Date('03/01/2019'),
+                                    endDate: new Date('03/02/2019'), duration: 2, progress: '0', predecessor: '17FS', resourceId: [3]
+                                },
+                                {
+                                    taskID: 19, taskName: 'Customer review meeting', startDate: new Date('03/03/2019'),
+                                    endDate: new Date('03/07/2019'), duration: 2, progress: '0', predecessor: '18FS', resourceId: [1]
+                                },
+                                {
+                                    taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('03/05/2019'),
+                                    endDate: new Date('03/05/2019'), duration: 0, predecessor: '19FS'
+                                }
+
+                            ]
+                        }]
+                    },
+
+                    {
+                        taskID: 21,
+                        taskName: 'Phase 2',
+                        startDate: new Date('02/25/2019'),
+                        endDate: new Date('03/05/2019'),
+                        subtasks: [{
+                            taskID: 22,
+                            taskName: 'Implementation module 2',
+                            startDate: new Date('02/25/2019'),
+                            endDate: new Date('03/05/2019'),
+                            subtasks: [
+                                {
+                                    taskID: 23, taskName: 'Development task 1', startDate: new Date('02/22/2019'),
+                                    endDate: new Date('02/25/2019'), duration: 4, progress: '50', resourceId: [3]
+                                },
+                                {
+                                    taskID: 24, taskName: 'Development task 2', startDate: new Date('02/22/2019'),
+                                    endDate: new Date('02/25/2019'), duration: 4, progress: '50', resourceId: [3]
+                                },
+                                {
+                                    taskID: 25, taskName: 'Testing', startDate: new Date('02/26/2019'),
+                                    endDate: new Date('03/01/2019'), duration: 2, progress: '0', predecessor: '23FS,24FS', resourceId: [4]
+                                },
+                                {
+                                    taskID: 26, taskName: 'Bug fix', startDate: new Date('03/02/2019'),
+                                    endDate: new Date('03/03/2019'), duration: 2, progress: '0', predecessor: '25FS', resourceId: [3]
+                                },
+                                {
+                                    taskID: 27, taskName: 'Customer review meeting', startDate: new Date('03/07/2019'),
+                                    endDate: new Date('03/09/2019'), duration: 2, progress: '0', predecessor: '26FS', resourceId: [1]
+                                },
+                                {
+                                    taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('03/03/2019'),
+                                    endDate: new Date('03/03/2019'), duration: 0, predecessor: '27FS'
+                                }
+
+                            ]
+                        }]
+                    },
+
+                    {
+                        taskID: 29,
+                        taskName: 'Phase 3',
+                        startDate: new Date('02/25/2019'),
+                        endDate: new Date('03/07/2019'),
+                        subtasks: [{
+                            taskID: 30,
+                            taskName: 'Implementation module 3',
+                            startDate: new Date('02/25/2019'),
+                            endDate: new Date('03/07/2019'),
+                            subtasks: [
+                                {
+                                    taskID: 31, taskName: 'Development task 1', startDate: new Date('02/22/2019'),
+                                    endDate: new Date('02/24/2019'), duration: 3, progress: '50', resourceId: [3]
+                                },
+                                {
+                                    taskID: 32, taskName: 'Development task 2', startDate: new Date('02/22/2019'),
+                                    endDate: new Date('02/24/2019'), duration: 3, progress: '50', resourceId: [3]
+                                },
+                                {
+                                    taskID: 33, taskName: 'Testing', startDate: new Date('02/25/2019'), endDate: new Date('02/26/2019'),
+                                    duration: 2, progress: '0', predecessor: '31FS,32FS', resourceId: [4]
+                                },
+                                {
+                                    taskID: 34, taskName: 'Bug fix', startDate: new Date('03/01/2019'), endDate: new Date('03/05/2019'),
+                                    duration: 2, progress: '0', predecessor: '33FS', resourceId: [3]
+                                },
+                                {
+                                    taskID: 35, taskName: 'Customer review meeting', startDate: new Date('03/03/2019'),
+                                    endDate: new Date('03/04/2019'), duration: 2, progress: '0', predecessor: '34FS',
+                                    resourceId: [1]
+                                },
+                                {
+                                    taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('03/02/2019'),
+                                    endDate: new Date('03/02/2019'), duration: 0, predecessor: '35FS'
+                                },
+
+                            ]
+                        }]
+                    }
+                ]
+            },
+            {
+                taskID: 37, taskName: 'Integration', startDate: new Date('03/08/2019'), endDate: new Date('03/10/2019'), duration: 3,
+                progress: '0', predecessor: '20FS,28FS,36FS', resourceId: [3]
+            },
+            {
+                taskID: 38, taskName: 'Final testing', startDate: new Date('03/11/2019'), endDate: new Date('03/12/2019'), duration: 2,
+                progress: '0', predecessor: '37FS', resourceId: [4]
+            },
+            {
+                taskID: 39, taskName: 'Final delivery', startDate: new Date('03/10/2019'), endDate: new Date('03/10/2019'),
+                duration: 0, predecessor: '38FS'
+            }
+        ]
+    }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/gantt/resource-customization-cs1/app/index.jsx b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/index.jsx
new file mode 100644
index 000000000..54638eddd
--- /dev/null
+++ b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/index.jsx
@@ -0,0 +1,137 @@
+export let ProjectResources = [
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Tamer Vinet' }
+];
+let data = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4,
+                Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
+            },
+            {
+                TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
+                resources: [2], info: 'Obtain an engineered soil test of lot where construction is planned.' +
+                    'From an engineer or company specializing in soil testing'
+            },
+            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '3', Progress: 30, resources: [3], },
+        ]
+    },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '4', Progress: 30, resources: [4],
+                info: 'Develop floor plans and obtain a materials list for estimations'
+            },
+            {
+                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '6', resources: [1], info: ''
+            },
+            {
+                TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
+                Duration: 4, Predecessor: '7',resources: [2], info: ''
+            }
+        ]
+    }
+];
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
+function App(){
+        const taskFields = {
+            id: 'TaskID',
+            name: 'TaskName',
+            resourceInfo: 'resources',
+            startDate: 'StartDate',
+            duration: 'Duration',
+            progress: 'Progress',
+            child: 'subtasks'
+        };
+        function queryTaskbarInfo(args) {
+            if(args.data.resources === 'Martin Tamer'){
+                args.taskbarBgColor = '#DFECFF';
+                args.progressBarBgColor = '#006AA6'
+            }else if(args.data.resources === 'Rose Fuller'){
+                args.taskbarBgColor = '#E4E4E7';
+                args.progressBarBgColor = '#766B7C'
+            }
+            else if(args.data.resources === 'Margaret Buchanan'){
+                args.taskbarBgColor = '#DFFFE2';
+                args.progressBarBgColor = '#00A653'
+            }
+            else if(args.data.resources === 'Tamer Vinet'){
+                args.taskbarBgColor = '#FFEBE9';
+                args.progressBarBgColor = '#FF3740'
+            }
+        };
+        const resColumnTemplate = (props) => {
+            if (props.ganttProperties.resourceNames) {
+              if (props.ganttProperties.resourceNames === 'Martin Tamer') {
+                return (
+                  <div style={{ width:'140px', height:'24px', borderRadius:'100px', backgroundColor:'#DFECFF', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color: '#006AA6', fontWeight: 500 }}>{props.ganttProperties.resourceNames}</span>
+                  </div>
+                );
+              }
+        
+              if (props.ganttProperties.resourceNames === 'Rose Fuller') {
+                return (
+                  <div style={{ width:'140px', height:'24px', borderRadius:'100px', backgroundColor:'#E4E4E7', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color: '#766B7C', fontWeight: 500 }}>{props.ganttProperties.resourceNames}</span>
+                  </div>
+                );
+              }
+        
+              if (props.ganttProperties.resourceNames === 'Margaret Buchanan') {
+                return (
+                  <div style={{ width:'140px', height:'24px', borderRadius:'100px', backgroundColor:'#DFFFE2', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color: '#00A653', fontWeight: 500 }}>{props.ganttProperties.resourceNames}</span>
+                  </div>
+                );
+              }
+        
+              if (props.ganttProperties.resourceNames === 'Tamer Vinet') {
+                return (
+                  <div style={{ width:'140px', height:'24px', borderRadius:'100px', backgroundColor:'#FFEBE9', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color: '#FF3740', fontWeight: 500 }}>{props.ganttProperties.resourceNames}</span>
+                  </div>
+                );
+              }
+        
+            } else {
+              return <div></div>
+            }
+          }
+        const template = resColumnTemplate.bind(this);
+        const resourceFields = {
+            id: 'resourceId',
+            name: 'resourceName'
+        };
+        const labelSettings = {
+            rightLabel: 'resources'
+        };
+        const splitterSettings = {
+            columnIndex: 2
+        };
+        return <GanttComponent id='root' queryTaskbarInfo= {queryTaskbarInfo} dataSource= { data } taskFields = { taskFields } resourceFields={resourceFields} labelSettings = { labelSettings } resources = { ProjectResources } height = '380px' splitterSettings = {splitterSettings} >
+            <ColumnsDirective>
+            < ColumnDirective field= 'TaskName'  headerText= 'Task Name'  width= '270' > </ColumnDirective>
+            < ColumnDirective field= 'resources'  headerText= 'Resources'  width= '175' template= {template} > </ColumnDirective>
+            < ColumnDirective field= 'StartDate' headerText='Start Date' width= '150' > </ColumnDirective>
+            < ColumnDirective field= 'Duration' width= '150' > </ColumnDirective>
+            < ColumnDirective field= 'Progress' width= '150' > </ColumnDirective>
+            </ColumnsDirective>
+        </GanttComponent>;
+};
+ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
diff --git a/ej2-react/code-snippet/gantt/resource-customization-cs1/app/index.tsx b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/index.tsx
new file mode 100644
index 000000000..0452079d4
--- /dev/null
+++ b/ej2-react/code-snippet/gantt/resource-customization-cs1/app/index.tsx
@@ -0,0 +1,137 @@
+export let ProjectResources = [
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Tamer Vinet' }
+];
+let data = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4,
+                Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
+            },
+            {
+                TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
+                resources: [2], info: 'Obtain an engineered soil test of lot where construction is planned.' +
+                    'From an engineer or company specializing in soil testing'
+            },
+            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '3', Progress: 30, resources: [3], },
+        ]
+    },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '4', Progress: 30, resources: [4],
+                info: 'Develop floor plans and obtain a materials list for estimations'
+            },
+            {
+                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '6', resources: [1], info: ''
+            },
+            {
+                TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
+                Duration: 4, Predecessor: '7',resources: [2], info: ''
+            }
+        ]
+    }
+];
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
+function App(){
+        const taskFields = {
+            id: 'TaskID',
+            name: 'TaskName',
+            resourceInfo: 'resources',
+            startDate: 'StartDate',
+            duration: 'Duration',
+            progress: 'Progress',
+            child: 'subtasks'
+        };
+        function queryTaskbarInfo(args: any) {
+            if(args.data.resources === 'Martin Tamer'){
+                args.taskbarBgColor = '#DFECFF';
+                args.progressBarBgColor = '#006AA6'
+            }else if(args.data.resources === 'Rose Fuller'){
+                args.taskbarBgColor = '#E4E4E7';
+                args.progressBarBgColor = '#766B7C'
+            }
+            else if(args.data.resources === 'Margaret Buchanan'){
+                args.taskbarBgColor = '#DFFFE2';
+                args.progressBarBgColor = '#00A653'
+            }
+            else if(args.data.resources === 'Tamer Vinet'){
+                args.taskbarBgColor = '#FFEBE9';
+                args.progressBarBgColor = '#FF3740'
+            }
+        };
+        const resColumnTemplate = (props: any) => {
+            if (props.ganttProperties.resourceNames) {
+              if (props.ganttProperties.resourceNames === 'Martin Tamer') {
+                return (
+                  <div style={{ width:'140px', height:'24px', borderRadius:'100px', backgroundColor:'#DFECFF', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color: '#006AA6', fontWeight: 500 }}>{props.ganttProperties.resourceNames}</span>
+                  </div>
+                );
+              }
+        
+              if (props.ganttProperties.resourceNames === 'Rose Fuller') {
+                return (
+                  <div style={{ width:'140px', height:'24px', borderRadius:'100px', backgroundColor:'#E4E4E7', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color: '#766B7C', fontWeight: 500 }}>{props.ganttProperties.resourceNames}</span>
+                  </div>
+                );
+              }
+        
+              if (props.ganttProperties.resourceNames === 'Margaret Buchanan') {
+                return (
+                  <div style={{ width:'140px', height:'24px', borderRadius:'100px', backgroundColor:'#DFFFE2', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color: '#00A653', fontWeight: 500 }}>{props.ganttProperties.resourceNames}</span>
+                  </div>
+                );
+              }
+        
+              if (props.ganttProperties.resourceNames === 'Tamer Vinet') {
+                return (
+                  <div style={{ width:'140px', height:'24px', borderRadius:'100px', backgroundColor:'#FFEBE9', display:'flex', alignItems:'center', justifyContent:'center' }}>
+                  <span style={{ color: '#FF3740', fontWeight: 500 }}>{props.ganttProperties.resourceNames}</span>
+                  </div>
+                );
+              }
+        
+            } else {
+              return <div></div>
+            }
+          }
+        const template: any = resColumnTemplate.bind(this);;
+        const resourceFields = {
+            id: 'resourceId',
+            name: 'resourceName'
+        };
+        const labelSettings = {
+            rightLabel: 'resources'
+        };
+        const splitterSettings = {
+            columnIndex: 2
+        };
+        return <GanttComponent id='root' queryTaskbarInfo= {queryTaskbarInfo} dataSource={ data } taskFields = { taskFields } resourceFields={resourceFields} labelSettings = {labelSettings } resources = { ProjectResources } height = '380px' splitterSettings = {splitterSettings} >
+            <ColumnsDirective>
+            < ColumnDirective field= 'TaskName'  headerText= 'Task Name'  width= '270' > </ColumnDirective>
+            < ColumnDirective field= 'resources'  headerText= 'Resources'  width= '175' template= {template} > </ColumnDirective>
+            < ColumnDirective field= 'StartDate' headerText='Start Date' width= '150' > </ColumnDirective>
+            < ColumnDirective field= 'Duration' width= '150' > </ColumnDirective>
+            < ColumnDirective field= 'Progress' width= '150' > </ColumnDirective>
+            </ColumnsDirective>
+        </GanttComponent>;
+};
+ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
diff --git a/ej2-react/code-snippet/gantt/resource-customization-cs1/index.html b/ej2-react/code-snippet/gantt/resource-customization-cs1/index.html
new file mode 100644
index 000000000..1edfb4c09
--- /dev/null
+++ b/ej2-react/code-snippet/gantt/resource-customization-cs1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+     <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+    </style>
+</head>
+
+<body>
+        <div id='root'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-react/code-snippet/gantt/resource-customization-cs1/systemjs.config.js b/ej2-react/code-snippet/gantt/resource-customization-cs1/systemjs.config.js
new file mode 100644
index 000000000..e4e9e9318
--- /dev/null
+++ b/ej2-react/code-snippet/gantt/resource-customization-cs1/systemjs.config.js
@@ -0,0 +1,61 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js",
+        "@syncfusion/ej2-react-gantt": "syncfusion:ej2-react-gantt/dist/ej2-react-gantt.umd.min.js",
+        "@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js",
+        "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+        "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-react-svg-base": "syncfusion:ej2-react-svg-base/dist/ej2-react-svg-base.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/ej2-react/gantt/accessibility.md b/ej2-react/gantt/accessibility.md
index 67f0ac5dc..dc5822967 100644
--- a/ej2-react/gantt/accessibility.md
+++ b/ej2-react/gantt/accessibility.md
@@ -60,21 +60,23 @@ The following ARIA attributes are used in Gantt:
 
 ## Keyboard navigation
 
-The Gantt component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component.
+The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns) guideline, ensuring accessibility for users of assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component:
 
 | **Press** | **To do this** |
 | --- | --- |
+| <kbd>Alt + J</kbd> | Focus Gantt component. |
+| <kbd>Tab / Shift + Tab</kbd> | Focus the next or previous element. |
 | <kbd>Home</kbd> | Selects the first row. |
 | <kbd>End</kbd> | Selects the last row. |
-| <kbd>DownArrow</kbd> | Moves the cell focus/row or cell selection downward. |
-| <kbd>UpArrow</kbd> | Moves the cell focus/row or cell selection upward. |
-| <kbd>LeftArrow</kbd> | Moves the cell focus/row or cell selection left side. |
-| <kbd>RightArrow</kbd> | Moves the cell focus/row or cell selection right side. |
+|| <kbd>DownArrow</kbd> | Moves the row selection downward. |
+| <kbd>UpArrow</kbd> | Moves the row  selection upward. |
+| <kbd>LeftArrow</kbd> | Moves the cell focus/cell selection left side. |
+| <kbd>RightArrow</kbd> | Moves the cell focus/cell selection right side. |
 | <kbd>Ctrl + Up Arrow</kbd> | Collapses all tasks. |
 | <kbd>Ctrl + Down Arrow</kbd> | Expands all tasks. |
 | <kbd>Ctrl + Shift + Up Arrow</kbd> | Collapses the selected row. |
 | <kbd>Ctrl + Shift + Down Arrow</kbd> | Expands the selected row. |
-|<kbd>Enter</kbd> | Saves request. |
+| <kbd>Enter</kbd> | Saves request. |
 | <kbd>Esc</kbd> | Cancels request. |
 | <kbd>Insert</kbd> | Adds a new row. |
 | <kbd>Ctrl + Insert</kbd> | Opens addRowDialog. |
@@ -82,12 +84,21 @@ The Gantt component followed the [keyboard interaction](https://www.w3.org/WAI/A
 | <kbd>Delete</kbd> | Deletes the selected row. |
 | <kbd>Shift + F5</kbd> | FocusTask |
 | <kbd>Ctrl + Shift + F</kbd> | Focus search |
-| <kbd>Shift + DownArrow</kbd> | Extends the row/cell selection downwards. |
-| <kbd>Shift + UpArrow</kbd> | Extends the row/cell selection upwards. |
+| <kbd>Shift + DownArrow</kbd> | Extends the cell selection downwards. |
+| <kbd>Shift + UpArrow</kbd> | Extends the cell selection upwards. |
 | <kbd>Shift + LeftArrow</kbd> | Extends the cell selection to the left side. |
 | <kbd>Shift + RightArrow</kbd> | Extends the cell selection to the right side. |
-| <kbd>Tab / Shift + Tab</kbd> | To focus the close icon in the message. |
-| <kbd>Alt + j</kbd> | Focus Gantt component. |
+| <kbd>Ctrl + Z</kbd> | Undo the last action. |
+| <kbd>Ctrl + Y</kbd> | Redo the last action. |
+
+**Navigate between toolbar items using keyboard**
+
+In the Gantt component, follow these steps to navigate between toolbar items using the keyboard:
+
+**Step 1**: Press `ALT + J` to focus on the gantt component.
+**Step 2**: Press the `Tab` key to navigate to the first item in the toolbar.
+**Step 3**: Use the `LeftArrow` or `RightArrow` keys to move between toolbar items.
+**Step 4**: Press `Tab` key again to remove focus from the toolbar and return focus to the Gantt component.
 
 ## Ensuring accessibility
 
diff --git a/ej2-react/gantt/images/baseline.png b/ej2-react/gantt/images/baseline.png
new file mode 100644
index 000000000..3cc98ad12
Binary files /dev/null and b/ej2-react/gantt/images/baseline.png differ
diff --git a/ej2-react/gantt/images/chart.png b/ej2-react/gantt/images/chart.png
new file mode 100644
index 000000000..1c124a186
Binary files /dev/null and b/ej2-react/gantt/images/chart.png differ
diff --git a/ej2-react/gantt/images/chartedit.png b/ej2-react/gantt/images/chartedit.png
new file mode 100644
index 000000000..eed3b2ed6
Binary files /dev/null and b/ej2-react/gantt/images/chartedit.png differ
diff --git a/ej2-react/gantt/images/critical-path.png b/ej2-react/gantt/images/critical-path.png
new file mode 100644
index 000000000..c79c60f17
Binary files /dev/null and b/ej2-react/gantt/images/critical-path.png differ
diff --git a/ej2-react/gantt/images/dependency.png b/ej2-react/gantt/images/dependency.png
new file mode 100644
index 000000000..8ba1410da
Binary files /dev/null and b/ej2-react/gantt/images/dependency.png differ
diff --git a/ej2-react/gantt/images/dependencytab.png b/ej2-react/gantt/images/dependencytab.png
new file mode 100644
index 000000000..542ebb19f
Binary files /dev/null and b/ej2-react/gantt/images/dependencytab.png differ
diff --git a/ej2-react/gantt/images/dialogBox.png b/ej2-react/gantt/images/dialogBox.png
new file mode 100644
index 000000000..fa87ba5ea
Binary files /dev/null and b/ej2-react/gantt/images/dialogBox.png differ
diff --git a/ej2-react/gantt/images/drag.png b/ej2-react/gantt/images/drag.png
new file mode 100644
index 000000000..043c34138
Binary files /dev/null and b/ej2-react/gantt/images/drag.png differ
diff --git a/ej2-react/gantt/images/event-markers.png b/ej2-react/gantt/images/event-markers.png
new file mode 100644
index 000000000..1890215ef
Binary files /dev/null and b/ej2-react/gantt/images/event-markers.png differ
diff --git a/ej2-react/gantt/images/gantt.png b/ej2-react/gantt/images/gantt.png
new file mode 100644
index 000000000..3d24a72ca
Binary files /dev/null and b/ej2-react/gantt/images/gantt.png differ
diff --git a/ej2-react/gantt/images/indicators.png b/ej2-react/gantt/images/indicators.png
new file mode 100644
index 000000000..7ea3a0fbc
Binary files /dev/null and b/ej2-react/gantt/images/indicators.png differ
diff --git a/ej2-react/gantt/images/manual-task.png b/ej2-react/gantt/images/manual-task.png
new file mode 100644
index 000000000..72d88d3a4
Binary files /dev/null and b/ej2-react/gantt/images/manual-task.png differ
diff --git a/ej2-react/gantt/images/milestone-element.png b/ej2-react/gantt/images/milestone-element.png
new file mode 100644
index 000000000..fcf52cedd
Binary files /dev/null and b/ej2-react/gantt/images/milestone-element.png differ
diff --git a/ej2-react/gantt/images/notestab.png b/ej2-react/gantt/images/notestab.png
new file mode 100644
index 000000000..ffaf99e91
Binary files /dev/null and b/ej2-react/gantt/images/notestab.png differ
diff --git a/ej2-react/gantt/images/resourcestab.png b/ej2-react/gantt/images/resourcestab.png
new file mode 100644
index 000000000..292783b82
Binary files /dev/null and b/ej2-react/gantt/images/resourcestab.png differ
diff --git a/ej2-react/gantt/images/tabular.png b/ej2-react/gantt/images/tabular.png
new file mode 100644
index 000000000..b59c972c0
Binary files /dev/null and b/ej2-react/gantt/images/tabular.png differ
diff --git a/ej2-react/gantt/key-elements.md b/ej2-react/gantt/key-elements.md
new file mode 100644
index 000000000..467981dea
--- /dev/null
+++ b/ej2-react/gantt/key-elements.md
@@ -0,0 +1,134 @@
+---
+layout: post
+title: Key Elements in Gantt UI for ##Platform_Name## Gantt control | Syncfusion
+description:  Checkout and learn about Key Elements in Gantt UI of ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+platform: ej2-react
+control: Key Elements in Gantt UI
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Key Elements in Gantt UI
+
+This section explains the key elements of the Gantt Chart interface.
+
+The Gantt component consists of two main sections: a `grid` and a `chart`, separated by a `splitter`. The grid is located on the left side of the Gantt component, while the chart section is on the right side. You can adjust the view of the Gantt by moving the splitter left or right to display only the grid, only the chart, or both.
+
+At the top of Gantt chart, having a [toolbar](https://ej2.syncfusion.com/react/documentation/gantt/tool-bar) that allows you to peform **CRUD** operations on tasks.
+
+![Gantt chart](./images/gantt.png)
+
+**Grid section**
+
+* In the tree grid section, the task details are presented in a tabular format.
+* You can expand or collapse a task by clicking on the expand/collapse icon near the parent task.
+* At the top of the tree grid section is the column header, which dispays the titles of different grid columns.
+
+![Grid](./images/tabular.png)
+
+
+**Chart section**
+
+* The `X-axis` of the chart represents the timeline scale.
+* In the chart section, task details are displayed in a taskbar format over a time range along with their activities.
+
+![Chart](./images/chart.png)
+
+
+**Elements in taskbar**
+
+* To change the task startDate and endDate value, you can use the start date gripper and end date gripper.
+* To change the progress value, you can use the progress gripper.
+
+![Chart edit](./images/chartedit.png)
+
+**Managing task dependency**
+
+To establish dependency connections between multiple tasks using connector points.
+
+![dependency](./images/dependency.png)
+
+**Other taskbars**
+
+**Milestone**
+
+A milestone is a unique type of task characterized by the following attributes:
+
+* It typically has no distinct start and end dates or may have both set to the same date.
+* The duration value for a milestone task is typically zero.
+
+![Milestone](./images/milestone-element.png)
+
+>For more information, refer to [Unscheduled Tasks](https://ej2.syncfusion.com/react/documentation/gantt/task-scheduling#unscheduled-tasks)
+
+**Manual taskbar**
+
+It is a type of task where the dates are not automatically validated by the Gantt chart.
+
+![Manual taskbar](./images/manual-task.png)
+
+>For more information, refer to [Manual Tasks](https://ej2.syncfusion.com/react/documentation/gantt/task-scheduling#manually-scheduled-tasks)
+
+**Baseline**
+
+A baseline is a line that shows the deviation between the planned dates and the actual dates of tasks.
+
+![Baseline](./images/baseline.png)
+
+**Critical path**
+
+It consists of a series of tasks (or sometimes only a single task) that determine the calculated finish date of the project. If a task on the critical path is delayed, the entire project will be delayed.
+
+![Critical path](./images/critical-path.png)
+
+**Other elements in chart section**
+
+**Indicators**
+
+It shows significant events on specified days for particular tasks with different icons and labels.
+
+![Indicators](./images/indicators.png)
+
+**Event markers**
+
+Event markers highlight important dates in the project timeline.
+
+![Event markers](./images/event-markers.png)
+
+**Row drag and drop**
+
+You can rearrange the Gantt chart rows by using the drag icon on the left side of the grid column.
+
+![Drag and drop](./images/drag.png)
+
+**Dialog box**
+
+* While editing a row, the dialog edit box will be used, which contains the following tabs:
+    * General
+    * Dependency
+    * Resources
+    * Notes
+
+![Dialog box](./images/dialogBox.png)
+
+The `General` tab contains form fields where you can view and edit task details. These fields include:
+    **TaskID**: Identifier for the task.
+    **TaskName**: Name or title of the task.
+    **Duration**: Duration of the task.
+    **StartDate**: Start date of the task.
+    **EndDate**: End date of the task.
+    **Progress**: Progress status of the task.
+
+The `Dependency` tab displays tasks that are dependent on the current task, along with their details presented in a tabular format.
+
+![Dependenct tab](./images/dependencytab.png)
+
+The `Resources` tab lists all resources assigned to the particular task, as well as available resources.
+
+![Resources tab](./images/resourcestab.png)
+
+The `Notes` tab displays any notes that have been added for the task.
+
+![Notes tab](./images/notestab.png)
diff --git a/ej2-react/gantt/managing-tasks/managing-tasks.md b/ej2-react/gantt/managing-tasks/managing-tasks.md
index 48369f342..1507d2842 100644
--- a/ej2-react/gantt/managing-tasks/managing-tasks.md
+++ b/ej2-react/gantt/managing-tasks/managing-tasks.md
@@ -167,11 +167,13 @@ You can set default values when new task dialog opens using [actionBegin](https:
 
 In Gantt Chart, the controls such as form elements, grid and RTE in add and edit dialog can be customized by using [additionalParams](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettingsModel/#additionalParams) property.
 
-### Customize general tab of dialog 
+### Customize general tab of dialog
 
-In the general tab of add/edit dialog, the custom input [fields](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettings/#fields) can be included into fields by defining the field names either from the data source or template in [addDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettings/) and [editDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/editDialogFieldSettings/) respectively.
+The form element in the `General` tab of the add/edit dialog can be added or removed by using the [fields](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettings/#fields) property within the [addDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettings/) and [editDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/editDialogFieldSettings/) settings respectively.
 
-In the below sample, added field from the template to general tab.
+The controls of the `fields` can be customized by using the [edit](https://ej2.syncfusion.com/react/documentation/gantt/managing-tasks/managing-tasks#cell-edit-template) template feature.
+
+In the below sample, `General` tab is customized using the `fields` property. The fields **TaskID**, **TaskName** and **newInput** are added in both `addDialogFields` and `editDialogFields` settings.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -187,11 +189,15 @@ In the below sample, added field from the template to general tab.
         
 {% previewsample "page.domainurl/code-snippet/gantt/toolbarRowadding-cs3" %}
   
-### Customize dependency, segments and resources tab of dialog 
+### Customize dependency, segments and resources tab of dialog
 
-[Grid](https://ej2.syncfusion.com/react/documentation/api/grid/) component in the dependency, segment and resource tab of add/edit dialog can be customized, by defining grid module properties in the [additionalParams](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettingsModel/#additionalParams) property of [addDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettings/) and [editDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/editDialogFieldSettings/).
+You can customize the dependency, segments, and resource tabs of the dialog box using the [additionalParams](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettingsModel/#additionalParams) property within the [addDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettings/) and [editDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/editDialogFieldSettings/) settings respectively. This customization involves defining properties from the [grid](https://ej2.syncfusion.com/react/documentation/api/grid/) within the `additionalParams` property.
 
-In the below code show cases, how to add additional features to dependency, segments and resources tab.
+In the example below:
+* The `dependency` tab enables [sorting](https://ej2.syncfusion.com/react/documentation/api/grid/#allowsorting) and [toolbar](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbar) options. 
+* The `segments` tab enables `sorting` and `toolbar` options and includes a new column `newData` defined with a specified [field](https://ej2.syncfusion.com/react/documentation/api/grid/columnModel/#field).
+* The `resources` tab defines a new column `Segment Task`  with specific properties such as `field`, [width](https://ej2.syncfusion.com/react/documentation/api/grid/columnModel/#width) and [headerText](https://ej2.syncfusion.com/react/documentation/api/grid/columnModel/#headertext).
+These customizations are applied to both `addDialogFields` and `editDialogFields` settings.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -209,9 +215,9 @@ In the below code show cases, how to add additional features to dependency, segm
 
 ### Customize note dialog tab
 
- [RTE](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/) component in notes tab of add and edit dialog can be customized, by defining RTE module properties in the [additionalParams](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettingsModel/#additionalParams) property of [addDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettings/) and [editDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/editDialogFieldSettings/).
- 
- The below code shows how to enable inline mode to RTE in notes tab.
+ You can customize the note dialog tab using the [additionalParams](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettingsModel/#additionalParams) property within the [addDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/addDialogFieldSettings/) and [editDialogFields](https://ej2.syncfusion.com/react/documentation/api/gantt/editDialogFieldSettings/) settings respectively. This customization involves defining properties from the [RTE](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/) module within the `additionalParams` property.
+
+In the following example, the `notes` tab is customized with the [inlinemode](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/#inlinemode) property enabled, allowing for in-place editing. Additionally, the `OnSelection` property is enabled, which opens the toolbar inline upon selecting text.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -237,7 +243,9 @@ Action |Description
 -----|-----
 [`Cell editing`](managing-tasks/#cell-editing) | To perform `double tap` on a specific cell, initiate the cell to be in edit state.
 [`Dialog editing`](managing-tasks/#dialog-editing) | To perform `double tap` on a specific row, initiate the edit dialog to be opened.
-[`Taskbar editing`](managing-tasks/#taskbar-editing) | Taskbar editing action is initiated using the `tap` action on the taskbar. <br> **Parent taskbar** : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing. <br> ![Alt text](images/editing-parent.PNG) <br> **Child taskbar** : Once you tap the child taskbar, it will be changed to editing state. <br> ![Alt text](images/editing-state.PNG) <br> **Dragging taskbar** : To drag a taskbar to the left or right in editing state. <br> <br> **Resizing taskbar** : To resize a taskbar, drag the left/right resize icon. <br> <br> **Progress resizing** : To change the progress, drag the progress resize icon to the left or right direction.
+[`Taskbar editing`](managing-tasks/#taskbar-editing) | Taskbar editing action is initiated using the `tap` action on the taskbar. <br> **Parent taskbar** : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing. <br>
+![Alt text](../images/editing-parent.PNG) <br> **Child taskbar** : Once you tap the child taskbar, it will be changed to editing state. <br>
+![Alt text](../images/editing-state.PNG) <br> **Dragging taskbar** : To drag a taskbar to the left or right in editing state. <br> <br> **Resizing taskbar** : To resize a taskbar, drag the left/right resize icon. <br> <br> **Progress resizing** : To change the progress, drag the progress resize icon to the left or right direction.
 
 ### Task dependency editing
 
diff --git a/ej2-react/gantt/index.md b/ej2-react/gantt/overview.md
similarity index 74%
rename from ej2-react/gantt/index.md
rename to ej2-react/gantt/overview.md
index 92021715e..c5a752e30 100644
--- a/ej2-react/gantt/index.md
+++ b/ej2-react/gantt/overview.md
@@ -15,10 +15,14 @@ The Gantt chart is a project management tool which provides a Microsoft Project-
 ## Key Features
 
 * [**Data sources**](./data-binding/) - Bind the Grid component with an array of JSON objects or DataManager.
+* [**Large data binding**](./data-binding/) - To render a large number of tasks in the Gantt Chart with an effective performance. It allows users to load parent records alone on load time. Child records render on demand during expansion action.
 * [**Editing**](./managing-tasks/): A task’s fields, such as duration, start date, end date, predecessors, and more, can be edited directly in their respective cells using the Edit dialog or interactively using taskbars.
+* [**Undo/Redo**](./undo-redo/): It enables users to revert the most recent action performed in the Gantt Chart. Redo feature can reapply an action that was previously undone using the Undo feature. This allows users to revert their decision to undo an action.
 * [**Task dependencies**](./task-dependency/): Defines task relationships using finish-to-start, start-to-finish, start-to-start, and finish-to-finish task dependency types.
 * [**Customizable timeline**](./time-line/): Displays timescale from minutes to decades easily and also displays the custom texts in timescale. Timeline can be displayed in either one-tier or two-tier layout.
 * [**Taskbars**](./task-scheduling/): Supports unscheduled tasks, and it can be customized. Baselines can also be displayed for the tasks.
+* [**Critical path**](./critical-path/):  It is a series of tasks (or sometimes only a single task) that controls the calculated finish date of the project. If a task in a critical path is delayed, then the entire project will be delayed.
+* [**Timezone**](./timezone/): It explains the Gantt Chart schedules project in their respective timezones.
 * [**Columns**](./columns/): Customizes the columns and adds the custom columns to the Gantt chart at initialization.
 * [**Resources**](./resources/): Resources are represented by staff, equipment, materials, and more. You can show and allocate the resources for each task.
 * [**Filtering**](./filtering/): Filters individual column using the menu filtering along with toolbar search box.
diff --git a/ej2-react/gantt/performance.md b/ej2-react/gantt/performance.md
new file mode 100644
index 000000000..0b779cae2
--- /dev/null
+++ b/ej2-react/gantt/performance.md
@@ -0,0 +1,88 @@
+---
+layout: post
+title: Performance tips for ##Platform_Name## Gantt control | Syncfusion
+description: Checkout and learn here all about how to improve the loading performance of ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+platform: ej2-react
+control: Gantt permformance
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Performance tips for ##Platform_Name## Gantt control
+
+This article is a comprehensive guide on improving the loading performance of the Gantt component, especially when dealing with large datasets and a significant number of columns. It provides valuable insights into the steps required to bind a large data source without experiencing performance degradation. By offering detailed explanations and actionable tips, this resource aims to empower readers with the knowledge and best practices necessary to optimize the performance of the Gantt component during data binding, ensuring a smooth and efficient user experience.
+
+## How to improve loading performance by binding large dataset
+
+A Gantt chart consists of rows, columns, and taskbars. For example, binding 10 rows and 10 columns results in rendering 100 elements in the Document Object Model (DOM) of Grid area and 10 elements in the Document Object Model (DOM) of chart area. To ensure optimal loading performance for the component, it is recommended to limit the number of rows and columns rendered. This approach helps in efficiently managing large datasets and enhancing the overall user experience.
+
+### Optimizing performance with virtualization
+
+To enhance your application's efficiency, especially when dealing with substantial datasets, it is recommended to using [virtualization](https://ej2.syncfusion.com/react/documentation/gantt/virtual-scroll). Implementing these techniques can significantly reduce the load on your application and elevate its overall performance.
+
+1.  **Row Virtualization**: The Virtual scrolling feature in the Gantt component enables the efficient handling and display of large volumes of data without compromising performance. This approach optimizes the rendering process by loading only the visible rows within the Gantt viewport, rather than rendering the entire dataset simultaneously. For more information on implementing row virtualization, you can refer to the [documentation](https://ej2.syncfusion.com/react/documentation/gantt/virtual-scroll#row-virtualization) section dedicated to this feature. This can be visualized while performing the vertical scroll action.
+
+2. **Timeline Virtualization**: The timeline virtualization feature in the Gantt Component enables efficient handling and display of large timespans without compromising performance. This approach optimizes the rendering process by loading only the visible timeline cells, which are typically three times the width of the Gantt element. Other timeline cells render on-demand during horizontal scrolling. For more information on implementing timeline virtualization, you can refer to the [documentation](https://ej2.syncfusion.com/react/documentation/gantt/virtual-scroll#timeline-virtualization) section dedicated to this feature. This can be visualized while performing the horizontal scroll action.
+
+3. **Load On Demand**: The Load on demand feature in the Gantt component enables you to render a large number of tasks in the Gantt Chart with optimal performance. With virtualization enabled, only the root-level records are fetched from the datasource during the initial load. When expanding a root parent node or scrolling vertically, the corresponding tasks are dynamically fetched from the datasource and updated in the DOM based on the current viewport position. This ensures that only the necessary data is rendered, significantly improving performance and responsiveness.
+
+## Optimizing performance with AutoCalculateDateScheduling
+
+In the Gantt chart component, by default it automatically calculates the start and end dates in [dataSource](https://ej2.syncfusion.com/react/documentation/api/gantt/#datasource) based on various factors such as working time, holidays, weekends, and predecessors. However, when rendering a large dataset, these calculations for data validation may result in performance issues. To avoid this, set the [autocalculatedatescheduling](https://ej2.syncfusion.com/react/documentation/api/gantt/#autocalculatedatescheduling) property to **false**. 
+
+>When setting `autocalculatedatescheduling` property to **false**, you must provide the valid data source; otherwise, the Gantt chart will render with invalid dates.
+
+## Optimizing react component rendering by mitigating unnecessary re-renders during state updates
+
+In React, when employing `useState` to update the state of a component while executing actions in a Gantt, the default behavior is to trigger a re-render of the component. This behavior, while standard in React, can pose challenges, particularly when essential Gantt actions such as selection are affected by the re-render.
+
+To tackle this and maintain the integrity of Gantt actions despite state updates, it is advisable to leverage the `useMemo` hook provided by React. This strategic use of `useMemo` prevents unnecessary re-renders of the component, ensuring that crucial aspects like Gantt selection remain unaffected.
+
+By incorporating `useMemo`, developers can optimize the rendering process, enhancing the performance of React components. For a more detailed understanding and practical implementation, refer to the [documentation](https://www.syncfusion.com/blogs/post/react-usecallback-vs-usememo-hooks.aspx) link.
+
+
+## How to improve loading performance by binding large data by showing custom text or element
+
+When integrating image or template elements into a Gantt column, it’s recommended to utilize the [Column Template](https://ej2.syncfusion.com/react/documentation/gantt/columns/column-template) feature instead of customizing data through the [rowDataBound](https://ej2.syncfusion.com/react/documentation/api/gantt/#rowdatabound) or [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/gantt/#querycellinfo) events. These events are triggered for each row and cell rendering, which can introduce delays in the component's rendering process. Moreover, rendering custom elements using these events may lead to the persistence of rendered elements, potentially causing longer rendering times over time. By opting for the column template feature, you can efficiently fulfill this requirement without experiencing rendering delays and ensure a more streamlined rendering process.
+
+## How to improve loading performance by referring individual script and CSS
+
+To enhance the performance of the Syncfusion Gantt component during initial rendering and certain actions, it is recommended to download specific component scripts using CRG (Custom Resource Generator) for optimized project loading. By default, the ej2.min.js script file includes all Syncfusion component scripts, which may lead to longer load times. Using [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator), you can selectively choose the components and their modules that your project requires. Subsequently, you can download only the necessary scripts and CSS, thereby improving loading times and optimizing resource utilization according to your project's needs.
+
+[CRG website link](https://crg.syncfusion.com/) 
+
+So to improve the performance of gantt during the initial rendering, suggested you to refer individual script and CSS.
+
+## How to optimize server-side data operations with adaptors
+
+The Gantt component provides support for various adaptors (OData, ODataV4, WebAPI, URL, etc.) to facilitate server-side data operations and CRUD functionalities. By utilizing these adaptors along with the `DataManager` component, you can seamlessly bind remote data sources to the Gantt and execute actions. During data operations such as filtering and sorting, the corresponding action queries are generated according to the adaptor's requirements. It is crucial to handle these actions on the application side and return the processed data back to the Gantt. Refer to the documentation for comprehensive details. It's worth noting that for efficient data processing, the suggested order for returning processed data to the Gantt is as follows:
+* Filtering
+* Sorting
+* Aggregates
+
+## How to avoid MaxJsonLength error while passing large amount of records
+
+The Gantt component operates on a client-server basis, meaning data is sent as a JSON object between the client and server. The reported issue occurs due to the serialization of a large JSON object. To resolve this, you need to increase the maximum length for serializing large JSON objects. This can be done by altering the [MaxJsonLength](https://social.msdn.microsoft.com/Forums/en-US/ab1a5864-46e2-4c57-9511-dc3f60cc314a/how-to-increase-maxjsonlength-for-json-post-in-mvc3?forum=aspmv) property in your web.config file or at the point of deserialization.
+
+**Solution: 1**
+
+```csharp
+<configuration> 
+   <system.web.extensions>
+       <scripting>
+           <webServices>
+               <jsonSerialization maxJsonLength="25000000"/>
+           </webServices>
+       </scripting>
+   </system.web.extensions>
+</configuration> 
+```
+
+**Solution : 2**
+```csharp
+var serializer = new JavaScriptSerializer { MaxJsonLength = Int32.MaxValue };
+```
+## Microsoft excel limitation while exporting millions of records to excel file format
+
+By default, Microsoft Excel supports only 1,048,576 records per sheet. Therefore, exporting millions of records directly to Excel is not feasible. For more details on Microsoft Excel specifications and limits, you can refer to the [documentation](https://support.microsoft.com/en-gb/office/excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3). It is recommended to export large datasets in CSV (Comma-Separated Values) or other formats that handle large data more efficiently than Excel.
\ No newline at end of file
diff --git a/ej2-react/gantt/resources.md b/ej2-react/gantt/resources.md
index 9591f1120..a524d004a 100644
--- a/ej2-react/gantt/resources.md
+++ b/ej2-react/gantt/resources.md
@@ -110,3 +110,25 @@ By using cell/ dialog edit option, we can add/remove the multiple resources for
 ![Cell Edit](images/cellEdit-resource.png)
 
 ![Dialog Edit](images/dialogedit-resource.png)
+
+## Custom background colors for resource column and taskbar
+
+In the Gantt Component, you can customize the background colors of the resource column and taskbars based on the resources assigned to each task. This customization enhances the readability and usability of the Gantt chart.
+
+To achieve this, utilize the [template](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#template) property for the resource column and the [queryTaskbarInfo](https://ej2.syncfusion.com/react/documentation/api/gantt#querytaskbarinfo) event. The `template` property allows you to define a custom template for the resource column, while the `queryTaskbarInfo` event to modify the taskbar properties, including background colors.
+
+The following code snippet demonstrates how to customize the background colors of the taskbar and resource column according to the assigned resources:
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/gantt/resource-customization-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/gantt/resource-customization-cs1/app/index.tsx %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/resource-customization-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/resource-customization-cs1" %}
\ No newline at end of file
diff --git a/ej2-react/gantt/selection/selection.md b/ej2-react/gantt/selection/selection.md
index 38298e50d..b5d322b22 100644
--- a/ej2-react/gantt/selection/selection.md
+++ b/ej2-react/gantt/selection/selection.md
@@ -122,14 +122,10 @@ In the following code, the rows which contains `TaskId` value as 3 and 4 are sel
 
 ## Touch interaction
 
-When you `tap` gantt row, tapped row will be selected.
+The touch interaction feature in the Gantt component allows you to easily interact with the Gantt chart on touch screen devices. This feature is particularly useful for enhancing usability on mobile devices and tablets, making it easier to navigate and interact with the Gantt chart's content using touch gestures.
 
-[`Single selection`](selection/#selection-mode) : To select a single row or cell, perform `single tap` on it.
+[`Single Row SSelection`](selection/#selection-mode) : When you tap on a row using a touch screen, the tapped row is automatically selected. This offers a straightforward way to select single rows with a touch interface.
 
-[`Multiple selection`](selection/#multiple-row-selection) : To perform multiple selection, `tap` on the multiple selection popup, and then tap the desired rows or cells.
+[`Multiple Row Selection`](selection/#multiple-row-selection) : To select multiple rows, you can utilize the multi-row selection feature. When you tap on a row, a popup is displayed, indicating the option for multi-row selection. Tap on the popup, and then proceed to tap on the desired rows you want to select. This allows you to select and interact with multiple rows simultaneously, as shown in the following image:
 
-![Multiple selection](../images/multiple-selection.PNG)
-
-## See Also
-
-* [Touch interaction](../touch-interaction)
\ No newline at end of file
+![Multiple selection](../images/multiple-selection.PNG)
\ No newline at end of file
diff --git a/ej2-react/spreadsheet/accessibility.md b/ej2-react/spreadsheet/accessibility.md
index 20f800d74..f70d894b8 100644
--- a/ej2-react/spreadsheet/accessibility.md
+++ b/ej2-react/spreadsheet/accessibility.md
@@ -116,4 +116,4 @@ The accessibility compliance of the Spreadsheet component is shown in the follow
 
 ## See also
 
-* [Accessibility in Syncfusion React components](../common/accessibility)
+* [Accessibility in Syncfusion React components](https://ej2.syncfusion.com/react/documentation/common/accessibility)
diff --git a/ej2-react/spreadsheet/cell-range.md b/ej2-react/spreadsheet/cell-range.md
index 140db0c31..6e0acfaca 100644
--- a/ej2-react/spreadsheet/cell-range.md
+++ b/ej2-react/spreadsheet/cell-range.md
@@ -110,7 +110,7 @@ You can apply data validation to restrict the type of data or the values that us
 You can apply data validation by using one of the following ways,
 
 * Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item.
-* Use the [`addDataValidation()`](../api/spreadsheet/#adddatavalidation) method programmatically.
+* Use the [`addDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#adddatavalidation) method programmatically.
 
 ### Clear Validation
 
@@ -119,7 +119,7 @@ Clear validation feature is used to remove data validations from the specified r
 You can clear data validation rule by one of the following ways,
 
 * Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item.
-* Use the [`removeDataValidation()`](../api/spreadsheet/#removedatavalidation) method programmatically.
+* Use the [`removeDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removedatavalidation) method programmatically.
 
 ### Highlight Invalid Data
 
@@ -128,7 +128,7 @@ Highlight invalid data feature is used to highlight the previously entered inval
 You can highlight an invalid data by using one of the following ways,
 
 * Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item.
-* Use the [`addInvalidHighlight()`](../api/spreadsheet/#addinvalidhighlight) method programmatically.
+* Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addinvalidhighlight) method programmatically.
 
 ### Clear Highlighted Invalid Data
 
@@ -137,7 +137,7 @@ Clear highlight feature is used to remove the highlight from invalid cells.
 You can clear the highlighted invalid data by using the following ways,
 
 * Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item.
-* Use the [`removeInvalidHighlight()`](../api/spreadsheet/#removeinvalidhighlight) method programmatically.
+* Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removeinvalidhighlight) method programmatically.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}
@@ -255,7 +255,7 @@ Clear feature helps you to clear the cell contents (formulas and data), formats
 You can apply clear feature by using one of the following ways,
 
 * Select the clear icon in the Ribbon toolbar under the Home Tab.
-* Using the [`clear()`](../api/spreadsheet/#clear) method to clear the values.
+* Using the [`clear()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#clear) method to clear the values.
 
 Clear has the following types in the spreadsheet,
 
diff --git a/ej2-react/spreadsheet/context-menu.md b/ej2-react/spreadsheet/context-menu.md
index 471e2aeed..6663d9ad5 100644
--- a/ej2-react/spreadsheet/context-menu.md
+++ b/ej2-react/spreadsheet/context-menu.md
@@ -38,10 +38,10 @@ Please find the table below for default context menu items and their actions.
 | [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#copy) | Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else. |
 | [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | Paste the data from clipboard to spreadsheet. |
 | [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from  <br/> clipboard to spreadsheet. |
-| [`Insert Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertrow) | Insert new rows or columns into the worksheet. |
-| [`Delete Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#deleterow) | Delete existing rows or columns from the worksheet. |
-| [`Hide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insert) | Hide the rows and columns. |
-| [`UnHide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#delete) | Show the hidden rows and columns. |
+| [`Insert Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertcolumn) | Insert new rows or columns into the worksheet. |
+| [`Delete Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#delete) / [`Delete Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#delete) | Delete existing rows or columns from the worksheet. |
+| [`Hide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hidecolumn) | Hide the rows or columns. |
+| [`UnHide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hidecolumn) | Show the hidden rows or columns. |
 
 ## Context Menu Items in Pager
 
diff --git a/ej2-react/spreadsheet/data-binding.md b/ej2-react/spreadsheet/data-binding.md
index 8c0ffaa67..4e70a8314 100644
--- a/ej2-react/spreadsheet/data-binding.md
+++ b/ej2-react/spreadsheet/data-binding.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Data binding in React Spreadsheet component
 
-The Spreadsheet uses [`DataManager`](../data), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [`DataManager`](../data) or JavaScript object array collection.
+The Spreadsheet uses [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started) or JavaScript object array collection.
 
 To get start quickly with Data Binding, you can check on this video:
 
@@ -41,7 +41,7 @@ Refer to the following code example for local data binding.
 
  {% previewsample "page.domainurl/code-snippet/spreadsheet/local-data-binding-cs1" %}
 
-> The local data source can also be provided as an instance of the [`DataManager`](../data). By default, [`DataManager`](../data) uses **JsonAdaptor** for local data-binding.
+> The local data source can also be provided as an instance of the [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started). By default, [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started) uses **JsonAdaptor** for local data-binding.
 
 ### Customizing column data mapping
 
@@ -64,7 +64,7 @@ The following code example demonstrates how to customize the mapping of column d
 
 ## Remote data
 
-To bind remote data to the Spreadsheet control, assign service data as an instance of [`DataManager`](../data) to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`.
+To bind remote data to the Spreadsheet control, assign service data as an instance of [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started) to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`.
 
 Refer to the following code example for remote data binding.
 
@@ -195,5 +195,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-ui-com
 
 * [Filtering](./filter)
 * [Sorting](./sort)
-* [Hyperlink](./link)
-* [`Collaborative Editing`](use-cases/collaborative-editing)
\ No newline at end of file
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/ej2-react/spreadsheet/filter.md b/ej2-react/spreadsheet/filter.md
index 1aceec399..afbb7ab01 100644
--- a/ej2-react/spreadsheet/filter.md
+++ b/ej2-react/spreadsheet/filter.md
@@ -22,14 +22,14 @@ In the active sheet, select a range of cells to filter by value of the cell. The
 
 * Select the filter item in the Ribbon toolbar.
 * Right-click the sheet, select the filter item in the context menu.
-* Use the [`applyFilter()`](../api/spreadsheet/#applyfilter) method programmatically.
+* Use the [`applyFilter()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#applyfilter) method programmatically.
 * Use `Ctrl + Shift + L` keyboard shortcut to apply the filter.
 
 > * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog.
 
 ## Filter by criteria
 
-The [`applyFilter()`](../api/spreadsheet/#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments.
+The [`applyFilter()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments.
 
 > * The [`beforeFilter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#beforefilter) event will be triggered before filtering the specified range.
 > * The [`filterComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#filtercomplete) event will be triggered after the filter action is completed successfully.
@@ -63,7 +63,7 @@ After applying filter to a certain column, you may want to clear it to make all
 
 * Choose `Clear` option in ribbon toolbar under `Filter and Sort`. It clears the filters applied in the spreadsheet for all fields.
 
-* Use the [`clearFilter()`](../api/spreadsheet/#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields.
+* Use the [`clearFilter()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields.
 
 ## Clear filter on a field
 
@@ -71,7 +71,7 @@ After filtering, you can clear/reset the filter for a field alone. It can be don
 
 * Click filter icon in the column’s header and then choose `Clear Filter` option from the filter dialog.
 * You can right-click on a filtered column cell and choose `Clear Filter from <Column Name>.` option from the context menu.
-* Use the [`clearFilter(field)`](../api/spreadsheet/#clearfilter) method programmatically, to clear the filter in a particular column.
+* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the filter in a particular column.
 
 ## Reapply filter
 
diff --git a/ej2-react/spreadsheet/formatting.md b/ej2-react/spreadsheet/formatting.md
index 67b26dcd8..97d29576d 100644
--- a/ej2-react/spreadsheet/formatting.md
+++ b/ej2-react/spreadsheet/formatting.md
@@ -204,7 +204,7 @@ Conditional formatting helps you to format a cell or range of cells based on the
 You can apply conditional formatting by using one of the following ways,
 
 * Select the conditional formatting icon in the Ribbon toolbar under the Home Tab.
-* Using the [`conditionalFormat()`](../api/spreadsheet/#conditionalformat) method to define the condition.
+* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#conditionalformat) method to define the condition.
 * Using the `conditionalFormats` in sheets model.
 
 Conditional formatting has the following types in the spreadsheet,
@@ -270,7 +270,7 @@ In the MAY and JUN columns, we have applied conditional formatting custom format
 You can clear the defined rules by using one of the following ways,
 
 * Using the “Clear Rules” option in the Conditional Formatting button of HOME Tab in the ribbon to clear the rule from selected cells.
-* Using the [`clearConditionalFormat()`](../api/spreadsheet/#clearconditionalformat) method to clear the defined rules.
+* Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#clearconditionalformat) method to clear the defined rules.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}
diff --git a/ej2-react/spreadsheet/formulas.md b/ej2-react/spreadsheet/formulas.md
index 597cb95fd..0e5b76566 100644
--- a/ej2-react/spreadsheet/formulas.md
+++ b/ej2-react/spreadsheet/formulas.md
@@ -247,5 +247,5 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-ui-com
 
 * [Editing](./editing)
 * [Formatting](./formatting)
-* [Open](./open)
-* [Save](./save)
+* [Open](./open-save#open)
+* [Save](./open-save#save)
\ No newline at end of file
diff --git a/ej2-react/spreadsheet/getting-started.md b/ej2-react/spreadsheet/getting-started.md
index bda8b52a3..e3e0ee36c 100644
--- a/ej2-react/spreadsheet/getting-started.md
+++ b/ej2-react/spreadsheet/getting-started.md
@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Getting Started
+# Getting started with React Spreadsheet component
 
 This section explains the steps to create a simple Spreadsheet component in a React application.
 
diff --git a/ej2-react/spreadsheet/global-local.md b/ej2-react/spreadsheet/global-local.md
index 5c36d4c9a..a60c0f14c 100644
--- a/ej2-react/spreadsheet/global-local.md
+++ b/ej2-react/spreadsheet/global-local.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
 
 ## Localization
 
-The [`Localization`](../common/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
+The [`Localization`](https://helpej2.syncfusion.com/react/documentation/common/globalization/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
 [`locale`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#locale) value and translation object.
 
 The following list of properties and their values are used in the Spreadsheet.
@@ -378,7 +378,7 @@ IsProtected | is protected
 
 ### Loading translations
 
-To load translation object in an application, use [`load`](../common/internationalization/#load) function of the [`L10n`](../common/internationalization) class.
+To load translation object in an application, use [`load`](https://helpej2.syncfusion.com/react/documentation/common/globalization/internationalization#loading-culture-data) function of the [`L10n`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization) class.
 
 The following example demonstrates the Spreadsheet in `French` culture. In the below sample we have translated the ribbon tab names and Home tab content (clipboard, cell style).
 
@@ -527,4 +527,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-ui-com
 
 ## See Also
 
-* [Localization](../common/localization)
+* [Localization](https://helpej2.syncfusion.com/react/documentation/common/globalization/localization)
diff --git a/ej2-react/spreadsheet/illustrations.md b/ej2-react/spreadsheet/illustrations.md
index fdbd5cb1a..434a492e7 100644
--- a/ej2-react/spreadsheet/illustrations.md
+++ b/ej2-react/spreadsheet/illustrations.md
@@ -115,9 +115,9 @@ The following types of charts are available in the Spreadsheet.
 You can insert the chart by using one of the following ways,
 
 * Select the chart icon in the Ribbon toolbar under the Insert Tab.
-* Use the [`insertChart()`](../api/spreadsheet/#insertchart) method programmatically.
+* Use the [`insertChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertchart) method programmatically.
 
-The available parameter in the [`insertChart()`](../api/spreadsheet/#insertchart) method is,
+The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertchart) method is,
 
 | Parameter | Type | Description |
 |-----|------|----|
@@ -152,9 +152,9 @@ The available arguments in the `ChartModel` are:
 ### Delete Chart
 
 * If you want to delete the chart, just select the chart, and then press the Delete key.
-* Use the [`deleteChart()`](../api/spreadsheet/#deletechart) method programmatically.
+* Use the [`deleteChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#deletechart) method programmatically.
 
-The available parameter in the [`deleteChart()`](../api/spreadsheet/#deletechart) method is,
+The available parameter in the [`deleteChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#deletechart) method is,
 
 | Parameter | Type | Description |
 |-----|------|----|
@@ -187,7 +187,7 @@ Chart feature allows you to view and insert a chart in a spreadsheet, and you ca
 
 #### Customization of line chart markers
 
-Using the [`actionBegin`](../api/spreadsheet/#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction.
+Using the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}
@@ -223,4 +223,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-ui-com
 * [Formatting](./formatting)
 * [Rows and columns](./rows-and-columns)
 * [Hyperlink](./link)
-* [Sorting](./sort)
+* [Sorting](./sort)
\ No newline at end of file
diff --git a/ej2-react/spreadsheet/link.md b/ej2-react/spreadsheet/link.md
index 36a0c63a4..3b7a95e37 100644
--- a/ej2-react/spreadsheet/link.md
+++ b/ej2-react/spreadsheet/link.md
@@ -23,7 +23,7 @@ You can insert a hyperlink in a worksheet cell for quick access to related infor
 In the active spreadsheet, click the cell where you want to create a hyperlink. Insert hyperlink can be done by any of the following ways:
 * Select the INSERT tab in the Ribbon toolbar and choose the `Link` item.
 * Right-click the cell and then click Hyperlink item in the context menu, or you can press Ctrl+K.
-* Use the [`addHyperlink()`](../api/spreadsheet/#hyperlink) method programmatically.
+* Use the [`addHyperlink()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addhyperlink) method programmatically.
 
 ## Edit Hyperlink
 
@@ -46,7 +46,7 @@ Performing this operation remove a single hyperlink without losing the display t
 
 In the active spreadsheet, click the cell where you want to remove a hyperlink. remove hyperlink can be done by any of the following ways:
 * Right-click the cell and then click Remove Hyperlink item in the context menu.
-* Use the [`removeHyperlink()`](../api/spreadsheet/#hyperlink) method programmatically.
+* Use the [`removeHyperlink()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removehyperlink) method programmatically.
 
 ## How to change target attribute
 
diff --git a/ej2-react/spreadsheet/open-save.md b/ej2-react/spreadsheet/open-save.md
index c18af7a97..f424e7296 100644
--- a/ej2-react/spreadsheet/open-save.md
+++ b/ej2-react/spreadsheet/open-save.md
@@ -112,7 +112,7 @@ The following code example shows how to import an excel document using file uplo
 
 ### Configure JSON deserialization options
 
-Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](../api/spreadsheet/#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet. 
+Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet. 
 
 Now, you have the option to selectively ignore some features during the opening of the JSON object by configuring deserialization options and passing them as arguments to the `openFromJson` method. This argument is optional, and if not configured, the entire workbook JSON object will be loaded without ignoring any features.
 
@@ -149,7 +149,7 @@ The following code snippet demonstrates how to configure the deserialization opt
 
 ### Open an excel file from Base64 string data
 
-In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](../api/spreadsheet/#open) method in the spreadsheet.
+In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#open) method in the spreadsheet.
 
 The following code example shows how to open the spreadsheet data as base64 string.
 
@@ -315,7 +315,7 @@ The possible values are:
 
 ### Configure JSON serialization options
 
-Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](../api/spreadsheet/#saveasjson) method, the entire workbook with all loaded features were processed and saved as a JSON object. 
+Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#saveasjson) method, the entire workbook with all loaded features were processed and saved as a JSON object. 
 
 Now, you have the option to selectively ignore some features while saving the Spreadsheet as a JSON object by configuring serialization options and passing them as arguments to the `saveAsJson` method. This argument is optional, and if not configured, the entire workbook JSON object will be saved without ignoring any features.
 
@@ -457,4 +457,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-ui-com
 
 * [Filtering](./filter)
 * [Sorting](./sort)
-* [Hyperlink](./link)
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/ej2-react/spreadsheet/overview.md b/ej2-react/spreadsheet/overview.md
index 5c881391c..9f7783a09 100644
--- a/ej2-react/spreadsheet/overview.md
+++ b/ej2-react/spreadsheet/overview.md
@@ -27,7 +27,6 @@ The React Spreadsheet is an user interactive component to organize and analyze d
 * [Sorting](sort): Helps you to arrange the data to particular order in a selected range of cells.
 * [Filtering](filter): Helps you to view specific rows in the Spreadsheet by hiding the other rows.
 * [Undo Redo](undo-redo): Provides the option to perform undo redo operations in Spreadsheet.
-* [Collaborative editing](use-cases/collaborative-editing): Provides the option for real time changes across multiple users in the Spreadsheet.
 * [Hyperlink](link): Provides the option to navigate to web link or cell reference within the sheet or to other sheet in Spreadsheet.
 * [Resize](mobile-responsiveness): Allows you to change the row height and column width. Auto fit the rows and columns based on its content.
 * [Wrap text](cell-range#wrap-text): Provides the option to display the large content as multiple lines in a single cell.
@@ -48,7 +47,7 @@ The React Spreadsheet is an user interactive component to organize and analyze d
 * [Password protection](protect-sheet#protect-workbook): Allows you to protect the workbook with a password.
 * [Multi-line editing](editing): Allows you to insert a line break between paragraphs of the text within a cell in a Spreadsheet.
 * [Calculate range selection](selection): Helps you to select a range or multiple ranges when editing a formula in a cell.
-* [Right-to-left (RTL)](right-to-left): Aligns content in the Spreadsheet component from right to left.
+* [Right-to-left (RTL)](global-local#right-to-left-rtl): Aligns content in the Spreadsheet component from right to left.
 * [Templates](template): Templates can be used to create custom user experiences in the Spreadsheet.
 * [Globalization](global-local): Personalize the Spreadsheet component with different languages, as well as culture-specific number, date, and time formatting.
-* [Accessibility](accessibility): Provides with built-in accessibility support which helps to access all the Spreadsheet component features through the keyboard, screen readers, or other assistive technology devices.
+* [Accessibility](accessibility): Provides with built-in accessibility support which helps to access all the Spreadsheet component features through the keyboard, screen readers, or other assistive technology devices.
\ No newline at end of file
diff --git a/ej2-react/spreadsheet/protect-sheet.md b/ej2-react/spreadsheet/protect-sheet.md
index cf4668f02..51b55dc9e 100644
--- a/ej2-react/spreadsheet/protect-sheet.md
+++ b/ej2-react/spreadsheet/protect-sheet.md
@@ -41,7 +41,7 @@ In the active Spreadsheet, the sheet protection can be done by any of the follow
 
 * Select the Protect Sheet item in the Ribbon toolbar under the Data Tab, and then select your desired options.
 * Right-click the sheet tab, select the Protect Sheet item in the context menu, and then select your desired options.
-* Use the [`protectSheet()`](../api/spreadsheet/#protectsheet) method programmatically.
+* Use the [`protectSheet()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#protectsheet) method programmatically.
 
 The following example shows `Protect Sheet` functionality in the Spreadsheet control.
 
@@ -76,11 +76,11 @@ In the active Spreadsheet, the sheet Unprotection can be done by any of the foll
 
 * Select the `Unprotect Sheet` item in the Ribbon toolbar under the Data Tab.
 * Right-click the sheet tab, select the `Unprotect Sheet` item in the context menu.
-* Use the [`unprotectSheet()`](../api/spreadsheet/#unprotectsheet) method programmatically.
+* Use the [`unprotectSheet()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#unprotectsheet) method programmatically.
 
 ## Unlock the particular cells in the protected sheet
 
-In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells()`](../api/spreadsheet/#lockcells) method, with the parameter `range` and `isLocked` property as false.
+In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#lockcells) method, with the parameter `range` and `isLocked` property as false.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}
@@ -101,9 +101,9 @@ In protected spreadsheet, to make some particular cell or range of cells are edi
 
 ## Make cells read-only without protecting worksheet
 
-Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](../api/spreadsheet/#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](../api/spreadsheet/#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. 
+Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. 
 
-Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](../api/spreadsheet/#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table:
+Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table:
 
 | Parameter | Description |
 |-----|------|
diff --git a/ej2-react/spreadsheet/rows-and-columns.md b/ej2-react/spreadsheet/rows-and-columns.md
index afdf200f6..68a916c4e 100644
--- a/ej2-react/spreadsheet/rows-and-columns.md
+++ b/ej2-react/spreadsheet/rows-and-columns.md
@@ -237,4 +237,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-compon
 
 * [Hyperlink](./link)
 * [Sorting](./sort)
-* [Filtering](./filter)
+* [Filtering](./filter)
\ No newline at end of file
diff --git a/ej2-react/spreadsheet/searching.md b/ej2-react/spreadsheet/searching.md
index 78026d6e7..92405d6fd 100644
--- a/ej2-react/spreadsheet/searching.md
+++ b/ej2-react/spreadsheet/searching.md
@@ -31,7 +31,7 @@ Find can be done by any of the following ways:
 > * `Match case`: To find the matched value with case sensitive.
 > * `Match exact cell contents`: To find the exact matched cell value with entire match cases.
 
-* Using [`find()`](../api/spreadsheet/#find) method to perform find operation.
+* Using [`find()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#find) method to perform find operation.
 
 ## Replace
 
@@ -44,8 +44,8 @@ Replace can be done by any of the following ways:
 * Using `Ctrl + H` key to open the Find and Replace dialog.
 * Using Replace button to change the found value in sheet or workbook.
 * Using ReplaceAll button to change all the found value's in sheet or workbook.
-* Using [`replace()`](../api/spreadsheet/#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`.
-* Using [`replace()`](../api/spreadsheet/#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`.
+* Using [`replace()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`.
+* Using [`replace()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`.
 
 ## Go to
 
@@ -54,7 +54,7 @@ Go to is used to navigate to a specific cell address in the sheet or workbook.
 **User Interface**:
 
 * Using `Ctrl + G` key to open the Go To dialog.
-* Using [`goTo()`](../api/spreadsheet/#goto) method to perform Go To operation.
+* Using [`goTo()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#goto) method to perform Go To operation.
 
 In the following sample, searching can be done by following ways:
 
diff --git a/ej2-react/spreadsheet/sort.md b/ej2-react/spreadsheet/sort.md
index 730ed436c..75bf99605 100644
--- a/ej2-react/spreadsheet/sort.md
+++ b/ej2-react/spreadsheet/sort.md
@@ -21,7 +21,7 @@ By default, the `sort` module is injected internally into Spreadsheet to perform
 In the active Spreadsheet, select a range of cells to sort by cell value. The range sort can be done by any of the following ways:
 * Select the sort item in the Ribbon toolbar and choose the ascending or descending item.
 * Right-click the sheet, select the sort item in the context menu and choose the ascending/descending item.
-* Use the [`sort()`](../api/spreadsheet/#sort) method programmatically.
+* Use the [`sort()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#sort) method programmatically.
 
 The cell values can be sorted in the following orders:
 * Ascending