ASP. NET beautiful free Gantt Chart controls

Source: Internet
Author: User

This is a Gantt chart control on the web. The size of the control is only 54kb and there is only one DLL file.

It is displayed in the form of separation between left and right. The binding fields of the graphic data are displayed on the left and the line plan of the Gantt chart on the right.

This control took about three days to complete. It was easy to use. After setting the specified field and datasource A Abel, you can. The control is developed based on the. net2.0 framework. It certainly does not support 1.1, but I think it will be compatible with the above.

Controls Support ie5, IE6, IE7, IE8, ff, and chrome

This control is completely free to use, including commercial use, but please keep the copyright (

Control preview:


Instructions for use

The method is simple. First copy Gantt. DLL to your project and add it to your vs toolbox.

How to add vs2008: Right-click the vs toolbox


Click "select items". In the displayed dialog box, select Browse to find Gantt. dll. Click "OK ".


A ganttcontrol control is added to the menu, which is the Gantt chart control.

Drag ganttcontrol to your page, such

The Gantt Chart control is displayed when no node is running.

The following is the front-end code.

View code

1 <%@ Register Assembly="Gantt" Namespace="Gantt" TagPrefix="cc1" %>  

Control front-end code

1 <cc1:GanttControl ID="GanttControl2" runat="server">  
2 cc1:GanttControl>

You can set the title text department of the control, that is, the title attribute.

Title = " Control Network"

This completes the front-end work. Now let's talk about how to bind data.

Binding data is divided into two parts: one is to specify the field, the other is to give a datatable OK

How to specify Fields

There are three methods to specify a field

Method 1:Right-click the control and click Properties. In the desired property list of the control, you will find an attribute group named boundfield. Clicking this property will have five properties.

For example

Taskname, starttimeplan, endtimeplan, personcharge, and progress

Five attribute notes: Task Name, start time, end time, owner and completion progress

You can set the corresponding field names for these attributes.

Method 2: 

The second method is to use the front-end code. I personally prefer this method:

<PC3: ganttcontrol id = "ganttcontrol1" runat = "server" Title = " Control Network">
<Boundfield taskname = "tasknames" starttimeplan = "starttimeplans" endtimeplan = "endtimeplans"
Personcharge = "personcharges" Progress = "progresss"> boundfield>
C0: ganttcontrol>

The third method is to bind the Code with the background Code as follows:

GanttControl1.BoundField.StartTimePlan = "StartTimePlan";  
GanttControl1.BoundField.EndTimePlan = "EndTimePlan";
GanttControl1.BoundField.Progress = "Progress";
GanttControl1.BoundField.TaskName = "TaskName";
GanttControl1.BoundField.PersonCharge = "PersonCharge";

The above is the method for specifying the field name. No matter which one you use, the datasource is required.

GanttControl1.Width = "800px";  
GanttControl1.Height = "250px";
GanttControl1.DataSource = dataTable();

Datatable (); // This Is My method to return datatable width and height. It is set width and height. OK. Let's run it.

Control property list


Title displayed in the header


Widget width


Control height


Gets or sets an object. The data binding control detects its object list from this object.



Data source field that is set to the value provided by the task name list item


Set the data source field to provide the value for the owner list item


Data source field that is set to the value provided by the scheduled start time list item


Data source field that is set to the value provided by the planned end time list item


Set the data source field that provides the value for the completion progress list item

: Http://

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.