ASP. NET beautiful free Gantt Chart Control version 1.1

Source: Internet
Author: User

In the previous version, some netizens "gz518" proposed to add the Custom field function, so the usage has changed in the past few days.

Here I will mainly discuss the usage

Introduction

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 of charge, including commercial controls. However, please keep the copyright (www.51ascx.com) for 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 ".

After successful addition, two more controls will be added in the VS toolbox.

For example

Drag GanttControl to your page. The other one is used for data binding. The Code is as follows:

<cc1:GanttControl ID="GanttControl1" runat="server"> cc1:GanttControl>  

In the above code, you can set the Title and width/height attributes of a space.

Next, let's talk about binding data. Note that there are five required fields for binding data, because I want to calculate them based on these five fields.

Let's take a look at my DEMO code. It will be better to see the code.

<C0: GanttControl ID = "GanttControl1" Title = "51ascx.com Gantt Chart" runat = "server">
<BoundField>
<C0: DataBindingItem ID = "DataBindingItem7" runat = "server" DataField = "id"
HeaderText = "identifier">
C0: DataBindingItem>
<C0: DataBindingItem ID = "DataBindingItem6" runat = "server" DataField = "zdy"
HeaderText = "Custom">
C0: DataBindingItem>
<C0: DataBindingItem ID = "DataBindingItem8" runat = "server" BindingMode = "Task Name"
DataField = "taskNames" HeaderText = "Task Name">
C0: DataBindingItem>
<C0: DataBindingItem ID = "DataBindingItem9" runat = "server" BindingMode = "Start Time"
DataField = "startTimePlans" HeaderText = "scheduled time">
C0: DataBindingItem>
<C0: DataBindingItem ID = "DataBindingItem10" runat = "server" BindingMode = "End Time"
Datafield = "endtimeplans" headertext = "completion time">
C0: databindingitem>
<C0: databindingitem id = "databindingitem11" runat = "server" bindingmode = "completion"
Datafield = "progresss" headertext = "progress">
C0: databindingitem>
<C0: databindingitem id = "databindingitem12" runat = "server" bindingmode = "owner"
Datafield = "personcharges" headertext = "owner">
C0: databindingitem>
Boundfield>
C0: ganttcontrol>

The code above shows that the binding is to be bound in the boundfield template, and a databindingitem node represents a field

The first two are custom and the last five are mandatory fields.

Datafield is a field of a custom database.

Headertext is the header

Here we will focus on the bindingmode attribute. We can see that there are six types of bindingmode. After binding, We need to specify fields except "Custom" for these six types, otherwise, I cannot find the data.

Bindingmode attributes:

Type I use Chinese, because I am Chinese :)

The custom type can be added by yourself. You can specify any field as needed.

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

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

The slice is as follows:

: Http://www.51ascx.com/247.html

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: info-contact@alibabacloud.com 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.