From 6c79e9c7c51a052bbd8934ba68afe828c24ff483 Mon Sep 17 00:00:00 2001 From: UDHAYAKUMAR Date: Thu, 26 Jun 2025 19:08:23 +0530 Subject: [PATCH] 964789: commit change --- .../gantt/columns/wbsColumn/razor | 26 +++ .../gantt/columns/wbsColumn/tagHelper | 25 +++ .../gantt/columns/wbsColumn/wbsColumn.cs | 5 + .../gantt/columns/wbsColumnEvents/razor | 45 ++++ .../gantt/columns/wbsColumnEvents/tagHelper | 45 ++++ .../wbsColumnEvents/wbsColumnEvents.cs | 5 + .../task-constraints-cs1/constraints.cs | 21 ++ .../task-constraints-cs1/razor | 22 ++ .../task-constraints-cs1/tagHelper | 26 +++ .../task-constraints-cs2/constraintsPopup.cs | 21 ++ .../task-constraints-cs2/razor | 32 +++ .../task-constraints-cs2/tagHelper | 35 +++ ej2-asp-core-mvc/gantt/columns/wbs-column.md | 80 +++++++ ej2-asp-core-mvc/gantt/task-constraints.md | 200 ++++++++++++++++++ ej2-asp-core-toc.html | 2 + ej2-asp-mvc-toc.html | 2 + 16 files changed, 592 insertions(+) create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/razor create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/wbsColumn.cs create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/razor create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/wbsColumnEvents.cs create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/constraints.cs create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/razor create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/constraintsPopup.cs create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/razor create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/tagHelper create mode 100644 ej2-asp-core-mvc/gantt/columns/wbs-column.md create mode 100644 ej2-asp-core-mvc/gantt/task-constraints.md diff --git a/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/razor b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/razor new file mode 100644 index 0000000000..dd845193d4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/razor @@ -0,0 +1,26 @@ + + @(Html.EJS().Gantt("WBSColumn").DataSource((IEnumerable)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 { "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()) + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/tagHelper new file mode 100644 index 0000000000..6feee4e124 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/tagHelper @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/wbsColumn.cs b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/wbsColumn.cs new file mode 100644 index 0000000000..c1c1c501bc --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumn/wbsColumn.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = GanttData.WBSData(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/razor b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/razor new file mode 100644 index 0000000000..2c236763b6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/razor @@ -0,0 +1,45 @@ + + @(Html.EJS().Gantt("WBSColumn").DataSource((IEnumerable)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 { "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()) + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/tagHelper new file mode 100644 index 0000000000..0fcf94b5ff --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/tagHelper @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/wbsColumnEvents.cs b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/wbsColumnEvents.cs new file mode 100644 index 0000000000..c1c1c501bc --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/columns/wbsColumnEvents/wbsColumnEvents.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = GanttData.WBSData(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/constraints.cs b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/constraints.cs new file mode 100644 index 0000000000..ab928f419d --- /dev/null +++ b/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(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/razor b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/razor new file mode 100644 index 0000000000..14a91ee2f5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/razor @@ -0,0 +1,22 @@ +@(Html.EJS().Gantt("Constraint").DataSource((IEnumerable)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 { "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()) diff --git a/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/tagHelper new file mode 100644 index 0000000000..f9fb57bbed --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs1/tagHelper @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/constraintsPopup.cs b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/constraintsPopup.cs new file mode 100644 index 0000000000..ab928f419d --- /dev/null +++ b/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(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/razor b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/razor new file mode 100644 index 0000000000..ec6a94f8b4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/razor @@ -0,0 +1,32 @@ +@(Html.EJS().Gantt("Constraint").DataSource((IEnumerable)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 { "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()) + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/tagHelper new file mode 100644 index 0000000000..648782b30d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/task-scheduling/task-constraints-cs2/tagHelper @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/gantt/columns/wbs-column.md b/ej2-asp-core-mvc/gantt/columns/wbs-column.md new file mode 100644 index 0000000000..d4817f49f4 --- /dev/null +++ b/ej2-asp-core-mvc/gantt/columns/wbs-column.md @@ -0,0 +1,80 @@ +--- +layout: post +title: Work Breakdown Structure (WBS) in Syncfusion ##Platform_Name## Gantt Component +description: Learn how to enable and manage WBS codes in the Syncfusion ##Platform_Name## Gantt component to improve task hierarchy visualization and project tracking. +platform: ej2-asp-core-mvc +control: WBS Column +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Work Breakdown Structure (WBS) in Gantt Control + +The Work Breakdown Structure (WBS) is a hierarchical numbering system that assigns unique and structured codes to each task, reflecting their positions within the overall project. This feature ensures data consistency and a clear, organized project view during operations such as sorting, filtering, editing, and drag-and-drop. + +## Configuration and implementation + +To enable and configure WBS in your Gantt component: + +- **Enable WBS Codes**: Set the [`EnableWBS`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.Gantt.html#Syncfusion_EJ2_Gantt_Gantt_EnableWBS) property to `true` to automatically generate unique task codes and their predecessors. +- **Auto-Update Codes**: Set the [`EnableAutoWbsUpdate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.Gantt.html#Syncfusion_EJ2_Gantt_Gantt_EnableAutoWbsUpdate) property to `true` to maintain WBS code accuracy during operations like sorting, filtering, editing, or drag-and-drop. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/gantt/columns/wbsColumn/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="WbsColumn.cs" %} +{% include code-snippet/gantt/columns/wbsColumn/wbsColumn.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/gantt/columns/wbsColumn/razor %} +{% endhighlight %} +{% highlight c# tabtitle="WbsColumn.cs" %} +{% include code-snippet/gantt/columns/wbsColumn/wbsColumn.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Managing WBS code updates + +For better performance, you can control when WBS codes are updated by using the [`ActionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.Gantt.html#Syncfusion_EJ2_Gantt_Gantt_ActionBegin) and [`DataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.Gantt.html#Syncfusion_EJ2_Gantt_Gantt_DataBound) events. This is particularly useful during actions like dragging and dropping rows. + +In the following example, WBS auto-update is enabled only during the **row drag and drop** action using these events. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/gantt/columns/wbsColumnEvents/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="WbsColumnEvents.cs" %} +{% include code-snippet/gantt/columns/wbsColumnEvents/wbsColumnEvents.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/gantt/columns/wbsColumnEvents/razor %} +{% endhighlight %} +{% highlight c# tabtitle="WbsColumnEvents.cs" %} +{% include code-snippet/gantt/columns/wbsColumnEvents/wbsColumnEvents.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Limitations + +The WBS feature has a few limitations in the Gantt component: + +- Editing of the WBS code and WBS predecessor columns is not supported. +- Load on demand is not supported with the WBS feature. +- WBS Code and WBS Predecessor fields cannot be mapped directly from the data source. \ No newline at end of file diff --git a/ej2-asp-core-mvc/gantt/task-constraints.md b/ej2-asp-core-mvc/gantt/task-constraints.md new file mode 100644 index 0000000000..68c7442def --- /dev/null +++ b/ej2-asp-core-mvc/gantt/task-constraints.md @@ -0,0 +1,200 @@ +--- +layout: post +title: Task Constraints in Syncfusion ##Platform_Name## Gantt Component +description: Learn how to implement and manage task constraints in the Syncfusion ##Platform_Name## Gantt component to enforce scheduling rules and dependencies. +platform: ej2-asp-core-mvc +control: Constraints +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Task Constraints in Gantt Control + +Task constraints define rules that control when a task is allowed to start or finish in the project timeline. They help ensure that tasks follow a logical sequence, align with fixed deadlines, and make efficient use of resources. Constraints also support planning for real-world limitations like material delays, team availability, or mandatory compliance dates—making your schedule more realistic and reliable. + +--- + +## Benefits of using task constraints + +Task constraints help guide the schedule of each task by applying real-world rules. They serve critical planning purposes and offer the following benefits: +- **Enforce Task Logic**: Ensure tasks follow a defined sequence, especially when one cannot begin until another ends. +- **Align with Milestones**: Anchor key tasks to fixed dates such as launches, reviews, or audits. +- **Avoid Resource Conflicts**: Prevent tasks from overlapping when they rely on the same resources or teams. +- **Support Scenario Planning**: Modify constraints to test "what-if" situations and explore how delays or accelerations affect the timeline. +- **Meet Business and Compliance Deadlines**: Guarantee that mandatory deadlines are met and ensure the schedule supports regulatory timelines. +- **Improve Planning Accuracy**: Account for real-world limitations like material availability or stakeholder input windows. + +--- + +## Understanding task constraint types + +| Constraint Type | Description | Example Use Case | +|------------------------------|-----------------------------------------------------------------------------|----------------------------------------------------------------------------------| +| **As Soon As Possible (ASAP)** | Starts the task immediately once its dependencies are cleared. | Begin development as soon as design is approved. | +| **As Late As Possible (ALAP)** | Delays the task until the last possible moment without affecting successors. | Apply polish to UI just before release to use the latest assets. | +| **Must Start On (MSO)** | Requires the task to begin on a fixed, non-negotiable date. | Partner company begins integration on July 1st per contract. | +| **Must Finish On (MFO)** | Requires the task to end on a fixed date, regardless of its dependencies. | Submit compliance documentation by March 31 due to government regulations. | +| **Start No Earlier Than (SNET)** | Prevents a task from starting before a certain date. | A campaign cannot begin until regulatory approval on August 15. | +| **Start No Later Than (SNLT)** | Requires a task to start on or before a given date. | Financial reviews must begin by September 1 to meet reporting cycles. | +| **Finish No Earlier Than (FNET)** | Ensures the task does not finish before a certain date. | Training can’t end before all participants have completed onboarding. | +| **Finish No Later Than (FNLT)** | Ensures task completion on or before a specific date. | QA testing must be done by July 25 to meet release deadlines. | + +--- + +## Configuration and implementation + +To enable and manage task constraints in the Gantt component, you need to configure specific fields under the `TaskFields` mapping. These fields tell the Gantt component which type of constraint to apply and the relevant date to enforce it. + +### Step 1: Define taskFields mappings + +In your Gantt component configuration, map the following fields: + +{% if page.publishingplatform == "aspnet-core" %} +```cshtml +TaskFields.Id = "taskId" +TaskFields.Name = "taskName" +TaskFields.StartDate = "startDate" +TaskFields.EndDate = "endDate" +TaskFields.ConstraintType = "constraintType" // Specifies the type of constraint (e.g., 2 for MustStartOn) +TaskFields.ConstraintDate = "constraintDate" // Specifies the relevant date for the constraint +``` +{% elsif page.publishingplatform == "aspnet-mvc" %} +```razor +TaskFields.Id = "taskId" +TaskFields.Name = "taskName" +TaskFields.StartDate = "startDate" +TaskFields.EndDate = "endDate" +TaskFields.ConstraintType = "constraintType" // Specifies the type of constraint (e.g., 2 for MustStartOn) +TaskFields.ConstraintDate = "constraintDate" // Specifies the relevant date for the constraint +``` +{% endif %} + +These mappings ensure that each task can interpret and apply its constraints correctly based on your data source. + +### Step 2: Provide constraint data + +In your project data source, ensure that each task includes values for the [`ConstraintType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.TaskFieldsModel.html#Syncfusion_EJ2_Gantt_TaskFieldsModel_ConstraintType) and [`ConstraintDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.TaskFieldsModel.html#Syncfusion_EJ2_Gantt_TaskFieldsModel_ConstraintDate) fields if constraints need to be applied. + +#### Example data format: + +```json +{ + "taskId": 1, + "taskName": "Design Approval", + "startDate": new DateTime(2025, 7, 1), + "endDate": new DateTime(2025, 7, 2), + "constraintType": 2, + "constraintDate": new DateTime(2025, 7, 1) +} +``` + +This task is constrained to must start on July 1, 2025. + +{% if page.publishingplatform == "aspnet-core" %} +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/gantt/task-scheduling/task-constraints-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Constraints.cs" %} +{% include code-snippet/gantt/task-scheduling/task-constraints-cs1/constraints.cs %} +{% endhighlight %} +{% endtabs %} +{% elsif page.publishingplatform == "aspnet-mvc" %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/gantt/task-scheduling/task-constraints-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Constraints.cs" %} +{% include code-snippet/gantt/task-scheduling/task-constraints-cs1/constraints.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Managing scheduling conflicts due to constraint violations + +When scheduling changes conflict with applied constraints, the Gantt component shows a violation popup to alert users. This validation applies specifically to strict constraint types: +- MustStartOn +- MustFinishOn +- StartNoLaterThan +- FinishNoLaterThan + +#### Programmatic conflict management + +You can intercept constraint violations using the `ActionBegin` event. When the event’s `RequestType` is `"ValidateTaskViolation"`, set specific flags in `args.ValidateMode` to determine how conflicts are handled. + +##### Supported flags + +| Flag | Description | +|-----------------------------|--------------------------------------------------------------| +| RespectMustStartOn | If true, silently rejects violations of MustStartOn. | +| RespectMustFinishOn | If true, silently cancels changes violating MustFinishOn. | +| RespectStartNoLaterThan | If true, blocks updates violating StartNoLaterThan. | +| RespectFinishNoLaterThan | If true, blocks changes violating FinishNoLaterThan. | + +> **Defaults**: All flags default to `false`, meaning violations show a popup. Setting a flag to `true` enables silent + + enforcement (i.e., the user’s update is canceled without interruption). + +#### Example setup + +{% if page.publishingplatform == "aspnet-core" %} +```cshtml +ActionBegin="ActionBeginHandler" +``` +```c# +public void ActionBeginHandler(Syncfusion.EJ2.Gantt.GanttActionEventArgs args) +{ + if (args.RequestType == "ValidateTaskViolation") + { + args.ValidateMode = new + { + RespectMustStartOn = true, + RespectMustFinishOn = true, + RespectStartNoLaterThan = true, + RespectFinishNoLaterThan = true + }; + } +} +``` +{% elsif page.publishingplatform == "aspnet-mvc" %} +```razor +ActionBegin="ActionBeginHandler" +``` +```c# +public void ActionBeginHandler(Syncfusion.EJ2.Gantt.GanttActionEventArgs args) +{ + if (args.RequestType == "ValidateTaskViolation") + { + args.ValidateMode = new + { + RespectMustStartOn = true, + RespectMustFinishOn = true, + RespectStartNoLaterThan = true, + RespectFinishNoLaterThan = true + }; + } +} +``` +{% endif %} + +In the following example, we have **disabled the `MustStartOn` violation popup** by setting `RespectMustStartOn` to `true`. + +{% if page.publishingplatform == "aspnet-core" %} +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/gantt/task-scheduling/task-constraints-cs2/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="ConstraintsPopup.cs" %} +{% include code-snippet/gantt/task-scheduling/task-constraints-cs2/constraintsPopup.cs %} +{% endhighlight %} +{% endtabs %} +{% elsif page.publishingplatform == "aspnet-mvc" %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/gantt/task-scheduling/task-constraints-cs2/razor %} +{% endhighlight %} +{% highlight c# tabtitle="ConstraintsPopup.cs" %} +{% include code-snippet/gantt/task-scheduling/task-constraints-cs2/constraintsPopup.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 2769e27589..241135fccd 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1188,6 +1188,7 @@
  • Responsive Columns
  • Checkbox Column
  • Column Spanning
    • +
  • WBS Column
  • Timeline @@ -1202,6 +1203,7 @@
  • Scheduling Tasks
  • Taskbar diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 3888028171..d516901aa3 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -1136,6 +1136,7 @@
  • Responsive Columns
  • Checkbox Column
  • Column Spanning
    • +
  • WBS Column
  • Timeline @@ -1150,6 +1151,7 @@
  • Scheduling Tasks
  • Taskbar