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

WebForms Gantt Overview

This example illustrates a specific project workflow using the RadGantt for ASP.NET AJAX. You could easily manage any Task's configuration, while using the RadGantt in a preferable View for serving out the data in a user-friendly manner. You can find information on how to work with the control's features in the Functionality section of the online documentation.

About RadGantt for ASP.NET AJAX

RadGantt control is a type of bar chart that is used in project management to illustrate a project schedule. It provides visual information about the work breakdown structure of the project.

The Gantt visualizes the different components of the project on a flexible timetable, making it easier to see:

  • Task summaries and their percentage of completion
  • Tasks and their start, end, duration and percentage of completion
  • Relations and overlap between tasks
  • Milestones

Key Features

  • Rich UI for creating and managing tasks
  • Day, Week, Month views
  • Planned vs Actual (baseline dates)
  • Customizable task edit capabilities
  • Data Binding - Client-side and Server-side
  • Integrated sorting, reordering and resizing
  • Templates for the Toolbar, Column and Column header, Header view and Task tooltip.
  • Column Show/Hide
  • Rich Client-side and Server-side API

More about RadGantt for ASP.NET AJAX
  • DefaultVB.aspx
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true"  %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</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" DataSourceID="TasksDataSource" Height="600px" ListWidth="350px"
            DependenciesDataSourceID="DependenciesDataSource" SelectedView="WeekView" Skin="Silk" AutoGenerateColumns="false">
            <Columns>
                <telerik:GanttBoundColumn DataField="Title" DataType="String" Width="120px"></telerik:GanttBoundColumn>
                <telerik:GanttBoundColumn DataField="Start" DataType="DateTime" DataFormatString="dd/MM/yy" Width="40px"></telerik:GanttBoundColumn>
                <telerik:GanttBoundColumn DataField="End" DataType="DateTime" DataFormatString="dd/MM/yy" Width="40px"></telerik:GanttBoundColumn>
            </Columns>

            <DataBindings>
                <TasksDataBindings
                    IdField="ID" ParentIdField="ParentID"
                    StartField="Start" EndField="End"
                    OrderIdField="OrderID"
                    SummaryField="Summary"
                    TitleField="Title" PercentCompleteField="PercentComplete" />
                <DependenciesDataBindings
                    TypeField="Type" IdField="ID"
                    PredecessorIdField="PredecessorID"
                    SuccessorIdField="SuccessorID" />
            </DataBindings>
        </telerik:RadGantt>
    </div>

    <sds:SessionDataSource ID="TasksDataSource" runat="server" DisplayWarning="false"
        PrimaryKeyFields="ID" ProviderName="System.Data.SqlClient" 
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        DeleteCommand="DELETE FROM [GanttTasks] WHERE [ID] = @ID"
        InsertCommand="INSERT INTO [GanttTasks] ([ParentID], [OrderID], [Title], [Start], [End], [PercentComplete], [Expanded], [Summary]) VALUES (@ParentID, @OrderID, @Title, @Start, @End, @PercentComplete, @Expanded, @Summary)"
        SelectCommand="SELECT * FROM [GanttTasks]"
        UpdateCommand="UPDATE [GanttTasks] SET [ParentID] = @ParentID, [OrderID] = @OrderID, [Title] = @Title, [Start] = @Start, [End] = @End, [PercentComplete] = @PercentComplete, [Expanded] = @Expanded, [Summary] = @Summary WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="ParentID" Type="Int32" />
            <asp:Parameter Name="OrderID" Type="Int32" />
            <asp:Parameter Name="Title" Type="String" />
            <asp:Parameter Name="Start" Type="DateTime" />
            <asp:Parameter Name="End" Type="DateTime" />
            <asp:Parameter Name="PercentComplete" Type="Decimal" />
            <asp:Parameter Name="Expanded" Type="Boolean" />
            <asp:Parameter Name="Summary" Type="Boolean" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ParentID" Type="Int32" />
            <asp:Parameter Name="OrderID" Type="Int32" />
            <asp:Parameter Name="Title" Type="String" />
            <asp:Parameter Name="Start" Type="DateTime" />
            <asp:Parameter Name="End" Type="DateTime" />
            <asp:Parameter Name="PercentComplete" Type="Decimal" />
            <asp:Parameter Name="Expanded" Type="Boolean" />
            <asp:Parameter Name="Summary" Type="Boolean" />
            <asp:Parameter Name="ID" Type="Int32" />
        </UpdateParameters>
    </sds:SessionDataSource>

    <sds:SessionDataSource ID="DependenciesDataSource" runat="server" DisplayWarning="false"
        PrimaryKeyFields="ID" ProviderName="System.Data.SqlClient" 
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        DeleteCommand="DELETE FROM [GanttDependencies] WHERE [ID] = @ID"
        InsertCommand="INSERT INTO [GanttDependencies] ([PredecessorID], [SuccessorID], [Type]) VALUES (@PredecessorID, @SuccessorID, @Type)"
        SelectCommand="SELECT * FROM [GanttDependencies]"
        UpdateCommand="UPDATE [GanttDependencies] SET [PredecessorID] = @PredecessorID, [SuccessorID] = @SuccessorID, [Type] = @Type WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="PredecessorID" Type="Int32" />
            <asp:Parameter Name="SuccessorID" Type="Int32" />
            <asp:Parameter Name="Type" Type="Int32" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="PredecessorID" Type="Int32" />
            <asp:Parameter Name="SuccessorID" Type="Int32" />
            <asp:Parameter Name="Type" Type="Int32" />
            <asp:Parameter Name="ID" Type="Int32" />
        </UpdateParameters>
    </sds:SessionDataSource>


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

Support & Learning Resources

Find Assistance