New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Planned vs Actual

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:

  • The actual end date of the task is before the planned end date - the task is colored green.
  • 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.
  • The actual start date of the task is after the planned end date - the task is colored red.

The plannedTasks tool set in the toolbar option enables a switch in the toolbar of the Gantt that allows toggling the Planned vs Actual functionality.

The ShowPlannedTasks configuration controls whether planned dates will be shown initially.

Through the AllowPlannedTasks, you can allow or prevent editing of planned tasks.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • GanttPlannedTasks.xml
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.GanttExamples.Functionality.PlannedVsActual.DefaultCS"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="../../../../Common/Scripts/pako.min.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container no-bg">
        <telerik:RadGantt RenderMode="Lightweight" runat="server" ID="RadGantt1"
            EnablePdfExport="true"
            Height="590px"
            SelectedView="WeekView"
            ShowPlannedTasks="true"
            AllowPlannedTasks="true"
            AutoGenerateColumns="false">
            <Toolbar>
                <Items>
                    <%-- Add task button --%>
                    <telerik:GanttToolbarItem Name="append"></telerik:GanttToolbarItem>
                    <%-- Export to PDF button --%>
                    <telerik:GanttToolbarItem Name="pdf"></telerik:GanttToolbarItem>
                    <%-- Show Planned Tasks switch button --%>
                    <telerik:GanttToolbarItem Name="plannedTasks"></telerik:GanttToolbarItem>
                </Items>
            </Toolbar>
            <Columns>
                <telerik:GanttBoundColumn DataField="title" HeaderText="Title" AllowEdit="true" AllowSorting="true" Width="200"></telerik:GanttBoundColumn>
                <telerik:GanttBoundColumn DataField="start" HeaderText="Actual Start Date" DataFormatString="M/d/yyyy" DataType="DateTime" Width="85"></telerik:GanttBoundColumn>
                <telerik:GanttBoundColumn DataField="end" HeaderText="Actual End Date" DataFormatString="M/d/yyyy" DataType="DateTime" Width="85"></telerik:GanttBoundColumn>
                <telerik:GanttBoundColumn DataField="plannedStart" HeaderText="Planned Start Date" DataFormatString="M/d/yyyy" DataType="DateTime" Width="85"></telerik:GanttBoundColumn>
                <telerik:GanttBoundColumn DataField="plannedEnd" HeaderText="Planned End Date" DataFormatString="M/d/yyyy" DataType="DateTime" Width="85"></telerik:GanttBoundColumn>
            </Columns>
        </telerik:RadGantt>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance