DOCINFRA-2341_merged_using_automation

ej2-vue-toc.html

@@ -1071,13 +1071,15 @@
 </li><li>
 Gantt
 <ul>
+    <li><a href="/ej2-vue/gantt/overview">Overview</a></li>
 <li>Getting Started
 <ul>
 <li><a href="/ej2-vue/gantt/getting-started">Vue 2</a></li>
 <li><a href="/ej2-vue/gantt/getting-started-vue">Vue 3</a></li>
 <li><a href="/ej2-vue/gantt/quasar">Quasar</a></li>
 </ul>
 </li>
+<li><a href="/ej2-vue/gantt/key-elements">Key Elements in Gantt UI</a></li>
 <li><a href="/ej2-vue/gantt/module">Feature Modules</a></li>
 <li>Data Binding
 <ul>
@@ -1086,6 +1088,7 @@
 <li><a href="/ej2-vue/gantt/loading-animation">Loading Animation</a></li>
 </ul>
 </li>
+<li><a href="/ej2-vue/gantt/performance">Performance Best Practices</a></li>
 <li>Columns
 <ul>
 <li><a href="/ej2-vue/gantt/columns/columns">Columns</a></li>

ej2-vue/code-snippet/gantt/managing-tasks-cs25/app-composition.vue

@@ -1,6 +1,6 @@
 <template>
      <div>
-        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings"  :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields"></ejs-gantt>
+        <ejs-gantt ref='gantt' id="GanttContainer" :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings"></ejs-gantt>
     </div>
 </template>
 <script setup>
@@ -10,6 +10,20 @@ import { GanttComponent as EjsGantt, Edit, Toolbar } from "@syncfusion/ej2-vue-g
 import {projectData ,editingResources} from "./data-source"
 
 const data = projectData;
+const addDialogFields = [
+    { type: 'General', headerText: 'General add',fields:["TaskID", "TaskName","newInput"]},
+    { type: 'Dependency'},
+    { type: 'Resources'} , 
+    { type: 'Notes' },
+    {type:"Segments"}
+];
+const editDialogFields = [
+    { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
+    { type: 'Dependency'},
+    { type: 'Resources'},
+    { type: 'Notes'},
+    { type: "Segments"}
+];
 const height = '450px';
 const taskFields = {
     id: 'TaskID',
@@ -40,19 +54,5 @@ const editSettings = {
     showDeleteConfirmDialog: true
 };
 const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
-const addDialogFields = [
-    { type: 'General', headerText: 'General add',fields:["TaskID", "TaskName","newInput"]},
-    { type: 'Dependency'},
-    { type: 'Resources'} , 
-    { type: 'Notes' },
-    {type:"Segments"}
-];
-const editDialogFields = [
-    { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
-    { type: 'Dependency'},
-    { type: 'Resources'},
-    { type: 'Notes'},
-    { type: "Segments"}
-];
 provide('gantt',  [ Edit, Toolbar ]);
 </script>

ej2-vue/code-snippet/gantt/managing-tasks-cs25/app.vue

@@ -1,6 +1,6 @@
 <template>
      <div>
-        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings"  :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields"></ejs-gantt>
+        <ejs-gantt ref='gantt' id="GanttContainer" :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings"></ejs-gantt>
     </div>
 </template>
 <script>
@@ -16,6 +16,20 @@ components: {
   data: function() {
       return{
         data: projectData,
+            addDialogFields: [
+                { type: 'General', headerText: 'General add',fields:["TaskID", "TaskName","newInput"]},
+                { type: 'Dependency'},
+                { type: 'Resources'} , 
+                { type: 'Notes' },
+                {type:"Segments"}
+            ],
+            editDialogFields: [
+                { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
+                { type: 'Dependency'},
+                { type: 'Resources'},
+                { type: 'Notes'},
+                { type: "Segments"}
+            ],
             height: '450px',
             taskFields: {
                 id: 'TaskID',
@@ -48,20 +62,6 @@ components: {
 
             toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
 
-            addDialogFields: [
-                { type: 'General', headerText: 'General add',fields:["TaskID", "TaskName","newInput"]},
-                { type: 'Dependency'},
-                { type: 'Resources'} , 
-                { type: 'Notes' },
-                {type:"Segments"}
-            ],
-            editDialogFields: [
-                { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
-                { type: 'Dependency'},
-                { type: 'Resources'},
-                { type: 'Notes'},
-                { type: "Segments"}
-            ],
       };
   },
   provide: {

ej2-vue/code-snippet/gantt/managing-tasks-cs25/index.js

@@ -81,6 +81,20 @@ new Vue({
                     ]
                 },
         ],
+            addDialogFields: [
+                { type: 'General', headerText: 'General add',fields:["newinput"]},
+                { type: 'Dependency', params: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
+                { type: 'Resources'} , 
+                { type: 'Notes' },
+                {type:"Segments", params:{columns:[{field:"segmenttask",width:"170px" ,headerText:"Segment Task"}],}}
+            ],
+            editDialogFields: [
+                { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
+                {type: 'Dependency', params: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
+                { type: 'Resources', params: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newdata" }]}},
+                {type: 'Notes', params: {inlineMode: { enable: true,onSelection: true }}},
+                {type: "Segments", params: {columns: [{ field: "segmenttask", width: "170px", headerText: "Segment Task" }],}}
+            ],
             height: '450px',
             taskFields: {
                 id: 'TaskID',
@@ -120,20 +134,6 @@ new Vue({
 
             toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
 
-            addDialogFields: [
-                { type: 'General', headerText: 'General add',fields:["newinput"]},
-                { type: 'Dependency', params: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
-                { type: 'Resources'} , 
-                { type: 'Notes' },
-                {type:"Segments", params:{columns:[{field:"segmenttask",width:"170px" ,headerText:"Segment Task"}],}}
-            ],
-            editDialogFields: [
-                { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
-                {type: 'Dependency', params: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
-                { type: 'Resources', params: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newdata" }]}},
-                {type: 'Notes', params: {inlineMode: { enable: true,onSelection: true }}},
-                {type: "Segments", params: {columns: [{ field: "segmenttask", width: "170px", headerText: "Segment Task" }],}}
-            ],
       };
   },
   provide: {

ej2-vue/code-snippet/gantt/managing-tasks-cs26/app-composition.vue

@@ -1,6 +1,6 @@
 <template>
      <div>
-        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings"  :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields"></ejs-gantt>
+        <ejs-gantt ref='gantt' id="GanttContainer" :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings" ></ejs-gantt>
     </div>
 </template>
 <script setup>
@@ -9,6 +9,20 @@ import { provide } from "vue";
 import { GanttComponent as EjsGantt, Edit, Toolbar } from "@syncfusion/ej2-vue-gantt";
 import {projectData ,editingResources} from "./data-source"
 const data = projectData;
+const addDialogFields = [
+    { type: 'General', headerText: 'General add',fields:["TaskID", "TaskName","newInput"]},
+    { type: 'Dependency'},
+    { type: 'Resources'} , 
+    { type: 'Notes' },
+    {type:"Segments"}
+];
+const editDialogFields = [
+    { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
+    { type: 'Dependency'},
+    { type: 'Resources'},
+    { type: 'Notes'},
+    { type: "Segments"}
+];
 const height = '450px';
 const taskFields = {
     id: 'TaskID',
@@ -39,19 +53,5 @@ const editSettings = {
     showDeleteConfirmDialog: true
 };
 const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
-const addDialogFields = [
-    { type: 'General', headerText: 'General add',fields:["TaskID", "TaskName","newInput"]},
-    { type: 'Dependency'},
-    { type: 'Resources'} , 
-    { type: 'Notes' },
-    {type:"Segments"}
-];
-const editDialogFields = [
-    { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
-    { type: 'Dependency'},
-    { type: 'Resources'},
-    { type: 'Notes'},
-    { type: "Segments"}
-];
 provide('gantt',  [ Edit, Toolbar ]);
 </script>

ej2-vue/code-snippet/gantt/managing-tasks-cs26/app.vue

@@ -1,6 +1,6 @@
 <template>
      <div>
-        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings"  :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields"></ejs-gantt>
+        <ejs-gantt ref='gantt' id="GanttContainer" :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings" ></ejs-gantt>
     </div>
 </template>
 <script>
@@ -16,6 +16,18 @@ components: {
   data: function() {
       return{
         data: projectData,
+            addDialogFields: [
+                { type: 'General'},
+                { type: 'Dependency', additionalParams: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
+                { type: 'Resources', additionalParams: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newData" }]}},
+                {type:"Segments", additionalParams:{columns:[{field:"segmentTask",width:"170px" ,headerText:"Segment Task"}],}}
+            ],
+            editDialogFields: [
+                { type: 'General' },
+                {type: 'Dependency', additionalParams: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
+                { type: 'Resources', additionalParams: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newData" }]}},
+                {type: "Segments", additionalParams: {columns: [{ field: "segmentTask", width: "170px", headerText: "Segment Task" }],}}
+            ],
             height: '450px',
             taskFields: {
                 id: 'TaskID',
@@ -48,18 +60,6 @@ components: {
 
             toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
 
-            addDialogFields: [
-                { type: 'General'},
-                { type: 'Dependency', additionalParams: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
-                { type: 'Resources', additionalParams: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newData" }]}},
-                {type:"Segments", additionalParams:{columns:[{field:"segmentTask",width:"170px" ,headerText:"Segment Task"}],}}
-            ],
-            editDialogFields: [
-                { type: 'General' },
-                {type: 'Dependency', additionalParams: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
-                { type: 'Resources', additionalParams: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newData" }]}},
-                {type: "Segments", additionalParams: {columns: [{ field: "segmentTask", width: "170px", headerText: "Segment Task" }],}}
-            ],
       };
   },
   provide: {

ej2-vue/code-snippet/gantt/managing-tasks-cs26/index.js

@@ -80,6 +80,20 @@ new Vue({
                         { StartDate: new Date('02/08/2019'), Duration: 3, segmenttask: "segment 3" }
                     ]
                 },
+        ],
+        addDialogFields: [
+            { type: 'General', headerText: 'General add',fields:["newinput"]},
+            { type: 'Dependency', params: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
+            { type: 'Resources'} , 
+            { type: 'Notes' },
+            {type:"Segments", params:{columns:[{field:"segmenttask",width:"170px" ,headerText:"Segment Task"}],}}
+        ],
+        editDialogFields: [
+            { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
+            {type: 'Dependency', params: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
+            { type: 'Resources', params: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newdata" }]}},
+            {type: 'Notes', params: {inlineMode: { enable: true,onSelection: true }}},
+            {type: "Segments", params: {columns: [{ field: "segmenttask", width: "170px", headerText: "Segment Task" }],}}
         ],
             height: '450px',
             taskFields: {
@@ -120,20 +134,6 @@ new Vue({
 
             toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
 
-            addDialogFields: [
-                { type: 'General', headerText: 'General add',fields:["newinput"]},
-                { type: 'Dependency', params: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
-                { type: 'Resources'} , 
-                { type: 'Notes' },
-                {type:"Segments", params:{columns:[{field:"segmenttask",width:"170px" ,headerText:"Segment Task"}],}}
-            ],
-            editDialogFields: [
-                { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
-                {type: 'Dependency', params: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
-                { type: 'Resources', params: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newdata" }]}},
-                {type: 'Notes', params: {inlineMode: { enable: true,onSelection: true }}},
-                {type: "Segments", params: {columns: [{ field: "segmenttask", width: "170px", headerText: "Segment Task" }],}}
-            ],
       };
   },
   provide: {

ej2-vue/code-snippet/gantt/managing-tasks-cs27/app-composition.vue

@@ -1,6 +1,6 @@
 <template>
      <div>
-        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings"  :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields"></ejs-gantt>
+        <ejs-gantt ref='gantt' id="GanttContainer" :editDialogFields="editDialogFields" :addDialogFields= "addDialogFields" :dataSource="data"  :resources= "resourceCollection" :resourceFields= "resourceFields" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings" ></ejs-gantt>
     </div>
 </template>
 <script setup>
@@ -9,6 +9,20 @@ import { provide } from "vue";
 import { GanttComponent as EjsGantt, Edit, Toolbar } from "@syncfusion/ej2-vue-gantt";
 import {projectData,editingResources} from "./data-source"
 const data = projectData;
+const addDialogFields = [
+    { type: 'General', headerText: 'General add',fields:["TaskID", "TaskName","newInput"]},
+    { type: 'Dependency'},
+    { type: 'Resources'} , 
+    { type: 'Notes' },
+    {type:"Segments"}
+];
+const editDialogFields = [
+    { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
+    { type: 'Dependency'},
+    { type: 'Resources'},
+    { type: 'Notes'},
+    { type: "Segments"}
+];
 const height = '450px';
 const taskFields = {
     id: 'TaskID',
@@ -39,19 +53,5 @@ const editSettings = {
     showDeleteConfirmDialog: true
 };
 const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
-const addDialogFields = [
-    { type: 'General', headerText: 'General add',fields:["TaskID", "TaskName","newInput"]},
-    { type: 'Dependency'},
-    { type: 'Resources'} , 
-    { type: 'Notes' },
-    {type:"Segments"}
-];
-const editDialogFields = [
-    { type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
-    { type: 'Dependency'},
-    { type: 'Resources'},
-    { type: 'Notes'},
-    { type: "Segments"}
-];
 provide('gantt',  [ Edit, Toolbar ]);
 </script>