|
| 1 | +--- |
| 2 | +title: Planned vs Actual |
| 3 | +page_title: Data Binding |
| 4 | +description: "Learn more about how the Telerik UI Gantt HtmlHelper for {{ site.framework }} displays planned and actual dates." |
| 5 | +slug: htmlhelpers_gantt_planned_vs_actual_aspnetcore |
| 6 | +position: 4 |
| 7 | +--- |
| 8 | + |
| 9 | +# Planned vs Actual |
| 10 | + |
| 11 | +The `Planned vs Actual` functionality of the Gantt allows you to compare actual `start` and `end` dates to originaly planned dates. If the actual completion date of a task matches the planned end time date, the default task appearance is used. In the scenarios listed below, when there is a difference between an actual and a planned date, the Gantt visualizes it by changing the appearance of the task: |
| 12 | + |
| 13 | +* The actual `end` date of the task is before the planned `end` date - the task is colored green. |
| 14 | +* The actual `end` date of the task is after the planned `end` date - a hatched bar that marks the delay is rendered in the task. |
| 15 | +* The actual `start` date of the task is after the planned `end` date - the task is colored red. |
| 16 | + |
| 17 | +For a full example of the Planned vs Actual functionality, refer to the [Planned vs Actual (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/planned-vs-actual). |
| 18 | + |
| 19 | +## Configuration |
| 20 | + |
| 21 | +The example below demonstrates how to configure the Gantt to display planned and actual dates. |
| 22 | + |
| 23 | +``` |
| 24 | +@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>() |
| 25 | + .Name("gantt") |
| 26 | + .Columns(columns => |
| 27 | + { |
| 28 | + columns.Bound(c => c.Title).Title("Task").Editable(true).Sortable(true).Width(200); |
| 29 | + columns.Bound(c => c.Start).Title("Actual Start Date").Format("{0:M/d/yyyy}").Width(85); |
| 30 | + columns.Bound(c => c.End).Title("Actual End Date").Format("{0:M/d/yyyy}").Width(85); |
| 31 | + columns.Bound(c => c.PlannedStart).Title("Planned Start Date").Format("{0:M/d/yyyy}").Width(85); |
| 32 | + columns.Bound(c => c.PlannedEnd).Title("Planned End Date").Format("{0:M/d/yyyy}").Width(85); |
| 33 | + }) |
| 34 | + .Views(views => |
| 35 | + { |
| 36 | + views.DayView(); |
| 37 | + views.WeekView(weekView => weekView.Selected(true)); |
| 38 | + views.MonthView(); |
| 39 | + }) |
| 40 | + .ShowPlannedTasks(true) |
| 41 | + .Toolbar(t => t.Add().Name("plannedTasks")) |
| 42 | + .Editable(e => e.PlannedTasks(true)) |
| 43 | + .Resizable(true) |
| 44 | + .Snap(false) |
| 45 | + .DataSource(d => d |
| 46 | + .Model(m => |
| 47 | + { |
| 48 | + m.Id(f => f.TaskID); |
| 49 | + m.ParentId(f => f.ParentID); |
| 50 | + m.OrderId(f => f.OrderId); |
| 51 | + m.Field(f => f.Expanded).DefaultValue(true); |
| 52 | + m.Field(f => f.PlannedStart); |
| 53 | + m.Field(f => f.PlannedEnd); |
| 54 | + }) |
| 55 | + .Read("Planned_Vs_Actual_Read_Tasks", "Gantt") |
| 56 | + ) |
| 57 | + .DependenciesDataSource(d => d |
| 58 | + .Model(m => |
| 59 | + { |
| 60 | + m.Id(f => f.DependencyID); |
| 61 | + m.PredecessorId(f => f.PredecessorID); |
| 62 | + m.SuccessorId(f => f.SuccessorID); |
| 63 | + m.Type(f => f.Type); |
| 64 | + }) |
| 65 | + .Read("Planned_Vs_Actual_Read_Dependencies", "Gantt") |
| 66 | + .Create("Planned_Vs_Actual_Create_Dependency", "Gantt") |
| 67 | + .Destroy("Planned_Vs_Actual_Destroy_Dependency", "Gantt") |
| 68 | + ) |
| 69 | +) |
| 70 | +``` |
| 71 | + |
| 72 | +The `plannedTasks` tool set in the `Toolbar` configuration enables a switch in the toolbar of the Gantt that allows toggling the `Planned vs Actual` functionality. |
| 73 | + |
| 74 | +The `ShowPlannedTasks` configuration controls whether planned dates will be shown initially. |
| 75 | + |
| 76 | +Through the `Editable` configuration, you can allow or prevent editing of planned tasks. |
| 77 | + |
| 78 | +## See Also |
| 79 | + |
| 80 | +* [Planned vs Actual (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/planned-vs-actual) |
| 81 | +* [Using the API of the Gantt HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/api) |
| 82 | +* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt) |
0 commit comments