Telerik UI for ASP. NET MVC擁有使用JavaScript和HTML5構(gòu)建網(wǎng)站和移動應(yīng)用所需的70+UI部件，來滿足開發(fā)者的各種需求，提供無語倫比的開發(fā)性能和用戶體驗。它主要是針對專業(yè)級的 ASP.NET開發(fā)，通過該產(chǎn)品的強(qiáng)大功能，開發(fā)者可以開發(fā)出功能豐富、適應(yīng)標(biāo)準(zhǔn)廣泛的響應(yīng)式應(yīng)用程序。

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

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

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

ASP. NET MVC Gantt控件是Telerik UI for ASP. NET MVC的一部分，一個專業(yè)級的UI庫，擁有110多個組件，可以構(gòu)建現(xiàn)代、功能豐富的Web應(yīng)用程序。Gantt是Kendo UI for jQuery Gantt的服務(wù)器封裝器，以HtmlHelper的形式出現(xiàn)。

我們是團(tuán)隊的一部分

當(dāng)接到一項復(fù)雜的任務(wù)時，假設(shè)您有一個軟件項目要交付，任務(wù)是為它實現(xiàn)代碼，怎么做才會更好更有效呢？作為一個團(tuán)隊來執(zhí)行項目。

將整個實現(xiàn)的部分分配給不同的開發(fā)人員不僅改善了工作流程，而且還促進(jìn)了多樣性和創(chuàng)造性思維，計算執(zhí)行較小任務(wù)所需的時間將提供整個過程是如何發(fā)生的。

如何用甘特圖自檢達(dá)到預(yù)期的結(jié)果？

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

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

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

@(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")
)
)

強(qiáng)調(diào)并更多地關(guān)注代碼片段的這個特定部分：

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

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

也可以應(yīng)用自定義任務(wù)模板，以確保更好的用戶體驗?？蛻舳薃PI和服務(wù)器API提供了許多配置選項，以及許多方法和事件。

下面的代碼片段顯示了項目管理圖和任務(wù)模板中團(tuán)隊領(lǐng)導(dǎo)列的配置：

<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組件的右側(cè)，您可以可視化項目管理流程的每個塊，并將其自己的私有設(shè)置作為開始和結(jié)束時間，您還可以表示任務(wù)完成進(jìn)度的百分比。

下面是一個關(guān)于如何在控制器中創(chuàng)建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,
}

測試甘特圖組件的靈活性

將自定義工具應(yīng)用于甘特圖等UI組件的原因有很多，最大的優(yōu)點(diǎn)是自定義功能，是開發(fā)者能根據(jù)個人或品牌需求調(diào)整組件的外觀。

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

有許多自定義工具添加到甘特圖的例子?？纯聪旅孢@個例子，看看如何給懸停項目上色。