Telerik UI for ASP. NET MVC擁有使用JavaScript和HTML5構建網站和移動應用所需的70+UI部件，來滿足開發者的各種需求，提供無語倫比的開發性能和用戶體驗。它主要是針對專業級的 ASP.NET開發，通過該產品的強大功能，開發者可以開發出功能豐富、適應標準廣泛的響應式應用程序。

在日常的工作中可能面臨解決不同的問題和挑戰，對于基本的可以很容易地決定如何行動，然而有時候會面臨更復雜的問題，處理這些問題的最佳方法是什么？把它們分成幾個更小的任務。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

一個大項目難以執行，但將其分解成更小、更容易消化的階段會簡化進程。Telerik UI for ASP. NET MVC的甘特圖組件就是這樣的工具，可以幫助開發者識別項目較小的部分，并在時間框架內計劃它們的執行。此外，分割完成工作所需的時間，并將其與不同的階段相匹配，可以確保在沒有任何延遲的情況下按時完成工作。

ASP. NET MVC Gantt控件是Telerik UI for ASP. NET MVC的一部分，一個專業級的UI庫，擁有110多個組件，可以構建現代、功能豐富的Web應用程序。Gantt是Kendo UI for jQuery Gantt的服務器封裝器，以HtmlHelper的形式出現。

我們是團隊的一部分

當接到一項復雜的任務時，假設您有一個軟件項目要交付，任務是為它實現代碼，怎么做才會更好更有效呢？作為一個團隊來執行項目。

將整個實現的部分分配給不同的開發人員不僅改善了工作流程，而且還促進了多樣性和創造性思維，計算執行較小任務所需的時間將提供整個過程是如何發生的。

如何用甘特圖自檢達到預期的結果？

Telerik UI for ASP. NET MVC甘特圖組件通常用于項目管理，它提供了一種簡單而全面的方式來顯示任務或時間，利用甘特圖用戶可以一目了然地分辨出：

• 各種各樣的活動是什么
• 每次活動開始和結束的時間
• 每個活動計劃持續多長時間
• 哪些活動與其他活動重疊，重疊的程度有多大

下面是一個甘特圖組件聲明的片段，允許用戶配置甘特圖的布局并構建父任務和子任務的層次結構，顯示在Telerik UI for ASP. NET MVC Gantt組建的左側。

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
.Name("gantt")
.Columns(columns =>
{
columns.Bound(c => c.Title).Title("Task").Editable(true).Sortable(true).Width(200);
columns.Bound(c => c.Start).Title("Actual Start Date").Format("{0:M/d/yyyy}").Width(85);
columns.Bound(c => c.End).Title("Actual End Date").Format("{0:M/d/yyyy}").Width(85);
columns.Bound(c => c.PlannedStart).Title("Planned Start Date").Format("{0:M/d/yyyy}").Width(85);
columns.Bound(c => c.PlannedEnd).Title("Planned End Date").Format("{0:M/d/yyyy}").Width(85);
columns.Bound(c => c.TeamLead).Title("Team Lead").Format("{0:M/d/yyyy}").Width(65).TemplateId("teamlead-template");
})
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
})
.ShowPlannedTasks(true)
.Editable(true)
.Resizable(true)
.Height(590)
.TaskTemplateId("task-template")
.ListWidth("45%")
.ShowWorkHours(false)
.ShowWorkDays(false)
.Snap(false)
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.ParentId(f => f.ParentID);
m.OrderId(f => f.OrderId);
m.Field(f => f.Expanded).DefaultValue(true);
})
.Read("Read_Tasks", "Home")
.Update("Update_Tasks", "Home")
)
.DependenciesDataSource(d => d
.Model(m =>
{
m.Id(f => f.DependencyID);
m.PredecessorId(f => f.PredecessorID);
m.SuccessorId(f => f.SuccessorID);
m.Type(f => f.Type);
})
.Read("Read_Dependencies", "Home")
.Create("Create_Dependency", "Home")
.Destroy("Destroy_Dependency", "Home")
)
)

強調并更多地關注代碼片段的這個特定部分：

.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();

它將允許用戶顯示選擇一個特定的時間視圖 - 天，周或月，此功能可通過甘特圖與集成在Telerik UI for ASP. NET MVC工具欄組件一起實現。

也可以應用自定義任務模板，以確保更好的用戶體驗。客戶端API和服務器API提供了許多配置選項，以及許多方法和事件。

下面的代碼片段顯示了項目管理圖和任務模板中團隊領導列的配置：

<script id="task-template" type="text/x-kendo-template">
<div class="template" style="display: flex;">
<span style="padding-right: 8px;">#= TeamLead #</span>
<div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%">#= (100 * parseFloat(percentComplete)) #%</div>
</div>
</script>

<script id="teamlead-template" type="text/x-kendo-template">
<div class="template">
<img class="resource-img" src="../content/#:ImageID#.jpg"/>
<span>#= TeamLead #</span>
</div>
</script>

在Gantt組件的右側，您可以可視化項目管理流程的每個塊，并將其自己的私有設置作為開始和結束時間，您還可以表示任務完成進度的百分比。

下面是一個關于如何在控制器中創建TaskViewModel的代碼片段：

new TaskViewModel
{
TaskID = Guid.Parse("c57c36ff-0695-45af-8be5-15ad6547311d"),
Title = "Software validation, research and implementation",
ParentID = null,
OrderId = 0,
Start = new DateTime(2020, 6, 1, 3, 0, 0),
End = new DateTime(2020, 6, 18, 3, 0, 0),
PlannedStart = new DateTime(2020, 6, 1, 3, 0, 0),
PlannedEnd = new DateTime(2020, 6, 12, 3, 0, 0),
PercentComplete = 0.43M,
Summary = true,
Expanded = true,
TeamLead = "Darrel Solis",
ImageID = 1,
}

測試甘特圖組件的靈活性

將自定義工具應用于甘特圖等UI組件的原因有很多，最大的優點是自定義功能，是開發者能根據個人或品牌需求調整組件的外觀。

向甘特圖組件添加自定義工具還允許用戶根據自己的偏好或風格控制(任務、事件、時間持續時間等)的表示以及圖表的整體設計，包括暗模式或亮模式、不同的按鈕顏色等。

有許多自定義工具添加到甘特圖的例子。看看下面這個例子，看看如何給懸停項目上色。