Essential Studio for ASP.NET是一款功能强大的用户界面套包产品，包含了上100种常用的界面控件，其中包含了TreeGrid树形控件，可以把数据以表格和树的形式展示出来，树型表格在实际应用中也十分广泛，这篇文章主要介绍如何使用TreeGrid控件快速创建树型表格应用，具体参考下面的介绍：
1.首先创建一款 ASP.NET Web Form 项目，并添加相关的DLL文件和脚本文件到项目中
2.创建一个Web Form，并添加下面的代码到该页面里
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs"Inherits="Gantt_ASP.TreeGrid._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Getting started for ASP.NET TreeGrid Control</title>
<link href=" http://cdn.
Syncfusion.com/13.1.0.21/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn.
Syncfusion.com/13.1.0.21/js/web/ej.web.all.min.js" type="text/javascript"></script>
</head>
3.初始化TreeGrid，并设置数据源为空
<body>
<form id="form1" runat="server">
<ej:TreeGrid runat="server" ID="TreeGridControlDefault" ChildMapping="SubTasks" TreeColumnIndex="1">
<columns>
<ej:TreeGridColumn HeaderText="Task Id" Field="TaskID" Width="45" />
<ej:TreeGridColumn HeaderText="Task Name" Field="TaskName" />
<ej:TreeGridColumn HeaderText="Start Date" Field="StartDate" />
<ej:TreeGridColumn HeaderText="End Date" Field="EndDate" />
<ej:TreeGridColumn HeaderText="Duration" Field="Duration" />
<ej:TreeGridColumn HeaderText="Progress" Field="Progress" />
</columns>
</ej:TreeGrid>
</form>
</body>
4.在default.aspx.cs 文件里创建一个数据源，并绑定到TreeGrid
protected void Page_Load(object sender, EventArgs e)
{
TaskDetailsCollection TasksCollection = new TaskDetailsCollection();
this.TreeGridControlDefault.DataSource = TasksCollection.GetDataSource();
this.TreeGridControlDefault.DataBind();
}
public class TaskDetails
{
public int TaskID { get; set; }
public string TaskName { get; set; }
public string StartDate { get; set; }
public string EndDate { get; set; }
public int Duration { get; set; }
public int Progress { get; set; }
public List<TaskDetails> SubTasks { get; set; }
}
public class TaskDetailsCollection
{
public List<TaskDetails> GetDataSource()
{
List<TaskDetails> tasks = new List<TaskDetails>();
tasks.Add(new TaskDetails()
{
TaskID = 1,
TaskName = "Planning",
StartDate = "02/03/2014",
EndDate = "02/07/2014",
Progress = 56,
Duration = 5,
});
tasks[0].SubTasks = new List<TaskDetails>();
tasks[0].SubTasks.Add(new TaskDetails()
{
TaskID = 2,
TaskName = "Plan timeline",
StartDate = "02/03/2014",
EndDate = "02/07/2014",
Duration = 5,
Progress = 100
});
tasks[0].SubTasks.Add(new TaskDetails()
{
TaskID = 3,
TaskName = "Plan budget",
StartDate = "02/03/2014",
EndDate = "02/07/2014",
Duration = 5,
Progress = 100
});
tasks[0].SubTasks.Add(new TaskDetails()
{
TaskID = 4,
TaskName = "Allocate resources",
StartDate = "02/03/2014",
EndDate = "02/07/2014",
Duration = 5,
Progress = 100
});
tasks[0].SubTasks.Add(new TaskDetails()
{
TaskID = 5,
TaskName = "Planning complete",
StartDate = "02/07/2014",
EndDate = "02/07/2014",
Duration = 0,
Progress = 40
});
tasks.Add(new TaskDetails()
{
TaskID = 6,
TaskName = "Design",
StartDate = "02/10/2014",
EndDate = "02/14/2014",
Duration = 3,
Progress = 86
});
tasks[1].SubTasks = new List<TaskDetails>();
tasks[1].SubTasks.Add(new TaskDetails()
{
TaskID = 7,
TaskName = "Software Specification",
StartDate = "02/10/2014",
EndDate = "02/12/2014",
Duration = 3,
Progress = 60
});
tasks[1].SubTasks.Add(new TaskDetails()
{
TaskID = 8,
TaskName = "Develop prototype",
StartDate = "02/10/2014",
EndDate = "02/12/2014",
Duration = 3,
Progress = 100
});
tasks[1].SubTasks.Add(new TaskDetails()
{
TaskID = 9,
TaskName = "Get approval from customer",
StartDate = "02/13/2014",
EndDate = "02/14/2014",
Duration = 2,
Progress = 100
});
tasks[1].SubTasks.Add(new TaskDetails()
{
TaskID = 10,
TaskName = "Design complete",
StartDate = "02/14/2014",
EndDate = "02/14/2014",
Duration = 0,
Progress = 65
});
return tasks;
}
}
5.运行程序，会出现下面的效果
