组件/调度/甘特

甘特概述

Telerik UI for ASP。网络核心Ninja image

甘特是Telerik UI for ASP。网络核心，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

Telerik UI Gantt TagHelper和HtmlHelper for ASP。网络核心are server-side wrappers for the Kendo UI Gantt widget.

Gantt显示了一组用于可视化项目计划数据的任务和依赖项。它提供了一个TreeList部分，用户可以在其中编辑任务，并以类似网格的方式对它们进行排序和重新排序，还提供了一个Timeline部分，其中任务和依赖项在可调的时间标尺下可视化。用户可以调整大小、移动、编辑和删除它们。Gantt还支持在日、周和月视图中显示Timeline部分。

从2022年R3版本开始，可选择的机制改变了。的改变事件现在只在选择/取消选择时被触发。

初始化甘特函数

下面的示例演示如何定义甘特函数。

@ (Html.Kendo()。甘特() .Name("gantt") .Columns(columns => { columns.Bound(c => c.TaskID).Title("ID").Width(50); columns.Bound(c => c.Title).Editable(true).Sortable(true); columns.Bound(c => c.Start).Width(100).Editable(true).Sortable(true); columns.Bound(c => c.End).Width(100).Editable(true).Sortable(true); }) .Views(views => { views.DayView(); views.WeekView(weekView => weekView.Selected(true)); views.MonthView(); }) .Height(700) .ShowWorkHours(false) .ShowWorkDays(false) .Snap(false) .DataSource(d => d .Model(m => { m.Id(f => f.TaskID); m.ParentId(f => f.ParentID); m.Field(f => f.Expanded).DefaultValue(true); }) .Read("ReadTasks", "Gantt") .Create("CreateTask", "Gantt") .Destroy("DestroyTask", "Gantt") .Update("UpdateTask", "Gantt") ) .DependenciesDataSource(d => d .Model(m => { m.Id(f => f.DependencyID); m.PredecessorId(f => f.PredecessorID); m.SuccessorId(f => f.SuccessorID); }) .Read("ReadDependencies", "Gantt") .Create("CreateDependency", "Gantt") .Destroy("DestroyDependency", "Gantt") ) )
<甘特name="甘特" show-work-days="false" show-work-hours="false" snap="false" height="700">  <甘特-column field="title" title=" title" editable="true" sortable="true"> <甘特-column field="resources" title="Assigned resources" editable="true" sortable="true">   <甘特-view type="GanttViewType. "Day">     <传输> <读取url="@Url.Action("ReadTasks"，"Gantt")"/>       < field name="title" from=" title" type="date"> < field name="summary" from=" summary" type="date">        
public分部类GanttController: Controller {private iganttttaskservice taskService;private igantdependencyservice;public GanttController(ganttTaskService ganttTaskService, ganttDependencyService ganttDependencyService) {taskService = ganttTaskService;dependencyService = ganttDependencyService;} [Demo] public ActionResult Index() {return View();} public virtual JsonResult ReadTasks([DataSourceRequest] DataSourceRequest request) {return Json(taskService.GetAll().ToDataSourceResult(request));} public virtual JsonResult DestroyTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task) {if (ModelState.IsValid) {taskService. JsonResult DestroyTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task)删除(任务、状态);}返回Json(new[] {task}.)ToDataSourceResult(请求状态));} public virtual JsonResult CreateTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task) {if (ModelState.IsValid) {taskService. JsonResult CreateTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task)插入(任务、状态); } return Json(new[] { task }.ToDataSourceResult(request, ModelState)); } public virtual JsonResult UpdateTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task) { if (ModelState.IsValid) { taskService.Update(task, ModelState); } return Json(new[] { task }.ToDataSourceResult(request, ModelState)); } public virtual JsonResult ReadDependencies([DataSourceRequest] DataSourceRequest request) { return Json(dependencyService.GetAll().ToDataSourceResult(request)); } public virtual JsonResult DestroyDependency([DataSourceRequest] DataSourceRequest request, DependencyViewModel dependency) { if (ModelState.IsValid) { dependencyService.Delete(dependency); } return Json(new[] { dependency }.ToDataSourceResult(request, ModelState)); } public virtual JsonResult CreateDependency([DataSourceRequest] DataSourceRequest request, DependencyViewModel dependency) { if (ModelState.IsValid) { dependencyService.Insert(dependency); } return Json(new[] { dependency }.ToDataSourceResult(request, ModelState)); } }

基本配置

下面的示例演示了Gantt的基本配置。

@ (Html.Kendo()。甘特() .Name("gantt") .Columns(columns => { columns.Bound(c => c.Title).Editable(true).Sortable(true); columns.Resources("resources").Editable(true).Title("Assigned Resources"); columns.Bound(c => c.Start).Width(100).Editable(true).Sortable(true); columns.Bound(c => c.End).Width(100).Editable(true).Sortable(true); }) .Views(views => { views.DayView(); views.WeekView(weekView => weekView.Selected(true)); views.MonthView(); }) .Height(700) .RowHeight(62) .ShowWorkHours(false) .ShowWorkDays(false) .Snap(false) .Pdf(pdf => pdf .FileName("Kendo UI Gantt Export.pdf") .ProxyURL(Url.Action("Pdf_Export_Save", "Gantt")) ) .Resizable(true) .DataSource(d => d .Model(m => { m.Id(f => f.TaskID); m.ParentId(f => f.ParentID); m.Field(f => f.Expanded).DefaultValue(true); }) .Read("ReadTasks", "Gantt") .Create("CreateTask", "Gantt") .Destroy("DestroyTask", "Gantt") .Update("UpdateTask", "Gantt") ) .DependenciesDataSource(d => d .Model(m => { m.Id(f => f.DependencyID); m.PredecessorId(f => f.PredecessorID); m.SuccessorId(f => f.SuccessorID); }) .Read("ReadDependencies", "Gantt") .Create("CreateDependency", "Gantt") .Destroy("DestroyDependency", "Gantt") ) .Resources(r => r .Field("resources") .DataColorField("Color") .DataTextField("Name") .DataSource(d => d .Custom() .Schema(s => s .Model(m => m.Id("ID")) .Data("Data") ) .Transport(t => { t.Read("ReadResources", "Gantt"); }) ) ) .Assignments(a => a .DataTaskIdField("TaskID") .DataResourceIdField("ResourceID") .DataValueField("Units") .DataSource(d => d .Model(m => { m.Id(f => f.ID); }) .Read("ReadAssignments", "Gantt") .Create("CreateAssignment", "Gantt") .Destroy("DestroyAssignment", "Gantt") .Update("UpdateAssignment", "Gantt") ) ) )
       <甘特-column field="title" title=" title" editable="true" sortable="true"> <甘特-column field="resources" title="Assigned resources" editable="true" sortable="true">   <甘特-viewtype = " GanttViewType。Day">     .

功能和特性

事件

有关基本甘特事件的完整示例，请参阅演示如何使用甘特事件．

引用现有实例

要引用现有的甘特实例，请使用jQuery.data ()配置选项。建立了引用之后，使用客户端Gantt API控制它的行为。

//把这个放在ASP. Gantt之后。NET Core声明。