964789: Adding UG documentation for WBS and Constraints

ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/razor

@@ -0,0 +1,26 @@
+
+        @(Html.EJS().Gantt("WBSColumn").DataSource((IEnumerable<object>)ViewData["DataSource"]).Height("550px")
+           .TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Dependency("Predecessor").ParentID("ParentID"))
+           .EnableWBS(true).EnableAutoWbsUpdate(true)
+           .Toolbar(new List<string> { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll" })
+           .EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true).ShowDeleteConfirmDialog(true))
+           .AllowSorting(true).EnableContextMenu(true).AllowSelection(true).TreeColumnIndex(2).AllowPdfExport(true)
+           .SplitterSettings(sp => sp.ColumnIndex(4))
+           .SelectionSettings(ss => ss.Mode(Syncfusion.EJ2.Grids.SelectionMode.Row).Type(Syncfusion.EJ2.Grids.SelectionType.Single).EnableToggle(false))
+           .TooltipSettings(ts => ts.ShowTooltip(true))
+           .FilterSettings(fs => fs.Type(Syncfusion.EJ2.Gantt.FilterType.Menu))
+           .TimelineSettings(tl => tl.ShowTooltip(true).TopTier(tt => tt.Format("MMM dd, yyyy").Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Week)).BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day)))
+           .HighlightWeekends(true).AllowFiltering(true).GridLines(Syncfusion.EJ2.Gantt.GridLine.Both)
+           .LabelSettings(ls => ls.TaskLabel("${Progress}%")).TaskbarHeight(20).RowHeight(40).AllowUnscheduledTasks(true)
+           .EventMarkers(em => { em.Day("04/02/2024").Label("Project Initiation").Add(); })
+           .ProjectStartDate("03/31/2024").ProjectEndDate("05/30/2024")
+           .Columns(col => {
+               col.Field("TaskId").Visible(false).Add();
+               col.Field("WBSCode").Width(150).Add();
+               col.Field("TaskName").Width(260).HeaderText("Task Name").AllowReordering(false).Add();
+               col.Field("StartDate").HeaderText("Start Date").Width(140).Add();
+               col.Field("WBSPredecessor").Width(190).HeaderText("WBS Predecessor").Add();
+               col.Field("Duration").HeaderText("Duration").AllowEditing(false).Add();
+               col.Field("Progress").HeaderText("Progress").Add();
+           }).Render())
+

ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/tagHelper

@@ -0,0 +1,25 @@
+            <ejs-gantt id="GanttChart" dataSource="@GanttData.WBSData()" allowSorting="true" enableContextMenu="true" enableWBS="true" enableAutoWbsUpdate="true" allowPdfExport="true" allowSelection="true" allowFiltering="true" allowUnscheduledTasks="true" highlightWeekends="true" gridLines="Both" height="550px" treeColumnIndex="2" projectStartDate="03/31/2024" projectEndDate="05/30/2024" rowHeight="40" taskbarHeight="20" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })">
+                <e-gantt-selectionsettings mode="Row" type="Single" enableToggle="false"></e-gantt-selectionsettings>
+                <e-gantt-splittersettings columnIndex="4"></e-gantt-splittersettings>
+                <e-gantt-timelinesettings>
+                    <e-timelinesettings-toptier unit="Week" format="dd/MM/yyyy"></e-timelinesettings-toptier>
+                    <e-timelinesettings-bottomtier unit="Day" count="1"></e-timelinesettings-bottomtier>
+                </e-gantt-timelinesettings>
+                <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
+                <e-gantt-filtersettings type="Menu"></e-gantt-filtersettings>
+                <e-gantt-tooltipsettings showTooltip="true"></e-gantt-tooltipsettings>
+                <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" dependency="Predecessor" parentID="ParentID"></e-gantt-taskfields>
+                <e-gantt-labelsettings taskLabel="${Progress}%"></e-gantt-labelsettings>
+                <e-gantt-columns>
+                    <e-gantt-column field="TaskId" headerText="Task ID" visible="false"></e-gantt-column>
+                    <e-gantt-column field="WBSCode" headerText="WBS Code" width="150px"></e-gantt-column>
+                    <e-gantt-column field="TaskName" headerText="Task Name" width="260px"></e-gantt-column>
+                    <e-gantt-column field="StartDate" headerText="Start Date" width="140px"></e-gantt-column>
+                    <e-gantt-column field="WBSPredecessor" headerText="WBS Predecessor" width="190px"></e-gantt-column>
+                    <e-gantt-column field="Duration" headerText="Duration" allowEditing="false"></e-gantt-column>
+                    <e-gantt-column field="Progress" headerText="Progress"></e-gantt-column>
+                </e-gantt-columns>
+                <e-gantt-eventmarkers>
+                    <e-gantt-eventmarker day="04/2/2024" label="Project Initiation"></e-gantt-eventmarker>
+                </e-gantt-eventmarkers>
+            </ejs-gantt>

ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/wbsColumn.cs

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = GanttData.WBSData();
+    return View();
+}

ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/razor

@@ -0,0 +1,45 @@
+
+        @(Html.EJS().Gantt("WBSColumn").DataSource((IEnumerable<object>)ViewData["DataSource"]).Height("550px")
+           .TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Dependency("Predecessor").ParentID("ParentID"))
+           .EnableWBS(true).EnableAutoWbsUpdate(false)
+           .Toolbar(new List<string> { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll" })
+           .EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true).ShowDeleteConfirmDialog(true))
+           .AllowSorting(true).EnableContextMenu(true).AllowSelection(true).TreeColumnIndex(2).AllowPdfExport(true)
+           .SplitterSettings(sp => sp.ColumnIndex(4))
+           .SelectionSettings(ss => ss.Mode(Syncfusion.EJ2.Grids.SelectionMode.Row).Type(Syncfusion.EJ2.Grids.SelectionType.Single).EnableToggle(false))
+           .TooltipSettings(ts => ts.ShowTooltip(true))
+           .FilterSettings(fs => fs.Type(Syncfusion.EJ2.Gantt.FilterType.Menu))
+           .TimelineSettings(tl => tl.ShowTooltip(true).TopTier(tt => tt.Format("MMM dd, yyyy").Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Week)).BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day)))
+           .HighlightWeekends(true).AllowFiltering(true).GridLines(Syncfusion.EJ2.Gantt.GridLine.Both)
+           .LabelSettings(ls => ls.TaskLabel("${Progress}%")).TaskbarHeight(20).RowHeight(40).AllowUnscheduledTasks(true)
+           .EventMarkers(em => { em.Day("04/02/2024").Label("Project Initiation").Add(); })
+           .ProjectStartDate("03/31/2024").ProjectEndDate("05/30/2024")
+           .Columns(col => {
+               col.Field("TaskId").Visible(false).Add();
+               col.Field("WBSCode").Width(150).Add();
+               col.Field("TaskName").Width(260).HeaderText("Task Name").AllowReordering(false).Add();
+               col.Field("StartDate").HeaderText("Start Date").Width(140).Add();
+               col.Field("WBSPredecessor").Width(190).HeaderText("WBS Predecessor").Add();
+               col.Field("Duration").HeaderText("Duration").AllowEditing(false).Add();
+               col.Field("Progress").HeaderText("Progress").Add();
+           }).Render())
+
+
+        <script>
+                var isRowDropped = false;
+		        function actionBegin(args) {
+		        	if (args.requestType === "beforeDrop") {
+                        var ganttObj = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
+                        isRowDropped = true;
+                        ganttObj.enableAutoWbsUpdate = true;
+                    }            
+		        }
+
+		        function dataBound() {
+		        	if (this.isRowDropped) {
+                        var ganttObj = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
+                        ganttObj.enableAutoWbsUpdate = false;
+                        isRowDropped = false;
+                    }
+		        }
+	    </script>

ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/tagHelper

@@ -0,0 +1,45 @@
+            <ejs-gantt id="GanttChart" dataSource="@GanttData.WBSData()" allowSorting="true" enableContextMenu="true" enableWBS="true" enableAutoWbsUpdate="false" allowPdfExport="true" allowSelection="true" allowFiltering="true" allowUnscheduledTasks="true" highlightWeekends="true" gridLines="Both" height="550px" treeColumnIndex="2" dataBound="dataBound" actionBegin="actionBegin"  projectStartDate="03/31/2024" projectEndDate="05/30/2024" rowHeight="40" taskbarHeight="20" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })">
+                <e-gantt-selectionsettings mode="Row" type="Single" enableToggle="false"></e-gantt-selectionsettings>
+                <e-gantt-splittersettings columnIndex="4"></e-gantt-splittersettings>
+                <e-gantt-timelinesettings>
+                    <e-timelinesettings-toptier unit="Week" format="dd/MM/yyyy"></e-timelinesettings-toptier>
+                    <e-timelinesettings-bottomtier unit="Day" count="1"></e-timelinesettings-bottomtier>
+                </e-gantt-timelinesettings>
+                <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
+                <e-gantt-filtersettings type="Menu"></e-gantt-filtersettings>
+                <e-gantt-tooltipsettings showTooltip="true"></e-gantt-tooltipsettings>
+                <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" dependency="Predecessor" parentID="ParentID"></e-gantt-taskfields>
+                <e-gantt-labelsettings taskLabel="${Progress}%"></e-gantt-labelsettings>
+                <e-gantt-columns>
+                    <e-gantt-column field="TaskId" headerText="Task ID" visible="false"></e-gantt-column>
+                    <e-gantt-column field="WBSCode" headerText="WBS Code" width="150px"></e-gantt-column>
+                    <e-gantt-column field="TaskName" headerText="Task Name" width="260px"></e-gantt-column>
+                    <e-gantt-column field="StartDate" headerText="Start Date" width="140px"></e-gantt-column>
+                    <e-gantt-column field="WBSPredecessor" headerText="WBS Predecessor" width="190px"></e-gantt-column>
+                    <e-gantt-column field="Duration" headerText="Duration" allowEditing="false"></e-gantt-column>
+                    <e-gantt-column field="Progress" headerText="Progress"></e-gantt-column>
+                </e-gantt-columns>
+                <e-gantt-eventmarkers>
+                    <e-gantt-eventmarker day="04/2/2024" label="Project Initiation"></e-gantt-eventmarker>
+                </e-gantt-eventmarkers>
+            </ejs-gantt>
+
+
+            <script>
+                var isRowDropped = false;
+		        function actionBegin(args) {
+		        	if (args.requestType === "beforeDrop") {
+                        var ganttObj = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
+                        isRowDropped = true;
+                        ganttObj.enableAutoWbsUpdate = true;
+                    }            
+		        }
+
+		        function dataBound() {
+		        	if (this.isRowDropped) {
+                        var ganttObj = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
+                        ganttObj.enableAutoWbsUpdate = false;
+                        isRowDropped = false;
+                    }
+		        }
+	        </script>

ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/wbsColumnEvents.cs

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = GanttData.WBSData();
+    return View();
+}

ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/constraints.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Mvc;
+using EJ2MVCSampleBrowser.Models;
+using EJ2MVCSampleBrowser.Controllers.Schedule;
+
+
+namespace EJ2MVCSampleBrowser.Controllers.Gantt
+{
+    public partial class GanttChartController : Controller
+    {
+
+        public ActionResult Constraints()
+        {
+            ViewData["DataSource"] = GanttData.ConstraintData();
+            return View();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/razor

@@ -0,0 +1,22 @@
+@(Html.EJS().Gantt("Constraint").DataSource((IEnumerable<object>)ViewData["DataSource"]).Height("450px")
+.TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Dependency("Predecessor").ParentID("ParentID").Notes("info").ConstraintDate("ConstraintDate").ConstraintType("ConstraintType"))
+.Toolbar(new List<string> { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })
+.EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true).ShowDeleteConfirmDialog(true))
+.AllowSelection(true).GridLines(Syncfusion.EJ2.Gantt.GridLine.Both).HighlightWeekends(true).TreeColumnIndex(1)
+.TimelineSettings(ts => ts.TopTier(tt => tt.Format("MMM dd, yyyy").Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Week)).BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day)))
+.EventMarkers(em => { em.Day("03/25/2025").Label("Project StartDate").Add(); em.Day("08/31/2025").Label("Project EndDate").Add(); })
+.Columns(col => {
+    col.Field("TaskId").Visible(false).Add();
+    col.Field("TaskName").HeaderText("Job Name").Width(200).ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();
+    col.Field("StartDate").Add();
+    col.Field("Duration").Add();
+    col.Field("ConstraintType").HeaderText("Constraint Type").Width(180).Add();
+    col.Field("ConstraintDate").HeaderText("Constraint Date").Add();
+    col.Field("EndDate").Add();
+    col.Field("Predecessor").Add();
+    col.Field("Progress").Add();
+})
+.LabelSettings(ls => ls.LeftLabel("TaskName").RightLabel("#rightLabel"))
+.SplitterSettings(sp => sp.ColumnIndex(4))
+.ProjectStartDate("03/25/2025").ProjectEndDate("09/01/2025")
+.Render())

ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/tagHelper

@@ -0,0 +1,26 @@
+<ejs-gantt id="Constraint" dataSource="@GanttData.ConstraintData()" gridLines="Both" treeColumnIndex="1" height="450px" allowSelection="true" highlightWeekends="true" projectStartDate="03/25/2025" projectEndDate="09/01/2025" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })">
+    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" parentid="ParentID" notes="info" constraintType="ConstraintType" constraintDate="ConstraintDate"></e-gantt-taskfields>
+    <e-gantt-eventmarkers>
+        <e-gantt-eventmarker day="03/25/2025" label="Project StartDate"></e-gantt-eventmarker>
+        <e-gantt-eventmarker day="08/31/2025" label="Project EndDate"></e-gantt-eventmarker>
+    </e-gantt-eventmarkers>
+    <e-gantt-splittersettings ColumnIndex="4"></e-gantt-splittersettings>
+    <e-gantt-timelinesettings>
+        <e-timelinesettings-toptier unit="Week" format="MMM dd, y"></e-timelinesettings-toptier>
+        <e-timelinesettings-bottomtier unit="Day" count="1"></e-timelinesettings-bottomtier>
+    </e-gantt-timelinesettings>
+    <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
+    <e-gantt-tooltipsettings showTooltip="true"></e-gantt-tooltipsettings>
+    <e-gantt-columns>
+        <e-gantt-column field="TaskID" visible="false"></e-gantt-column>
+        <e-gantt-column field="TaskName" headerText="Job Name" width="200" clipMode="EllipsisWithTooltip"></e-gantt-column>
+        <e-gantt-column field="StartDate"></e-gantt-column>
+        <e-gantt-column field="Duration"></e-gantt-column>
+        <e-gantt-column field="ConstraintType" width="180"></e-gantt-column>
+        <e-gantt-column field="ConstraintDate"></e-gantt-column>
+        <e-gantt-column field="EndDate"></e-gantt-column>
+        <e-gantt-column field="Predecessor"></e-gantt-column>
+        <e-gantt-column field="Progress"></e-gantt-column>
+    </e-gantt-columns>
+    <e-gantt-labelsettings leftLabel="TaskName" rightLabel="#rightLabel"></e-gantt-labelsettings>
+</ejs-gantt>

ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/constraintsPopup.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Mvc;
+using EJ2MVCSampleBrowser.Models;
+using EJ2MVCSampleBrowser.Controllers.Schedule;
+
+
+namespace EJ2MVCSampleBrowser.Controllers.Gantt
+{
+    public partial class GanttChartController : Controller
+    {
+
+        public ActionResult Constraints()
+        {
+            ViewData["DataSource"] = GanttData.ConstraintData();
+            return View();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/razor

@@ -0,0 +1,32 @@
+@(Html.EJS().Gantt("Constraint").DataSource((IEnumerable<object>)ViewData["DataSource"]).Height("450px")
+.TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Dependency("Predecessor").ParentID("ParentID").Notes("info").ConstraintDate("ConstraintDate").ConstraintType("ConstraintType"))
+.Toolbar(new List<string> { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })
+.EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true).ShowDeleteConfirmDialog(true))
+.AllowSelection(true).GridLines(Syncfusion.EJ2.Gantt.GridLine.Both).HighlightWeekends(true).TreeColumnIndex(1)
+.TimelineSettings(ts => ts.TopTier(tt => tt.Format("MMM dd, yyyy").Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Week)).BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day)))
+.EventMarkers(em => { em.Day("03/25/2025").Label("Project StartDate").Add(); em.Day("08/31/2025").Label("Project EndDate").Add(); })
+.Columns(col => {
+    col.Field("TaskId").Visible(false).Add();
+    col.Field("TaskName").HeaderText("Job Name").Width(200).ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();
+    col.Field("StartDate").Add();
+    col.Field("Duration").Add();
+    col.Field("ConstraintType").HeaderText("Constraint Type").Width(180).Add();
+    col.Field("ConstraintDate").HeaderText("Constraint Date").Add();
+    col.Field("EndDate").Add();
+    col.Field("Predecessor").Add();
+    col.Field("Progress").Add();
+})
+.LabelSettings(ls => ls.LeftLabel("TaskName").RightLabel("#rightLabel"))
+.ActionBegin("ActionBegin")
+.SplitterSettings(sp => sp.ColumnIndex(4))
+.ProjectStartDate("03/25/2025").ProjectEndDate("09/01/2025")
+.Render())
+
+
+<script>
+    ActionBegin(args) {
+            if (args.requestType === 'validateTaskViolation') {
+                args.validateMode.respectMustStartOn = true
+            }
+    }
+</script>