Blazor Gantt组件概述
的Blazor甘特图组件允许您轻松地说明任务集合。该组件由两个部分组成:
甘特分量是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
时，将数据收集传递给甘特树时，组件将自动呈现必要的元素时间轴．
创造Blazor Gantt
添加
TelerikGantt标记到Razor文件。设置它
数据属性设置为将保存数据集合的变量。控件设置组件尺寸
宽度而且高度属性。在其
GanttViews标签，设置所需的的观点．在其
GanttColumns标签，设置所需的GanttColumn实例的场属性指向要显示的模型字段的名称。处理
OnUpdate而且OnDelete事件，以响应项的更改。
甘特图的基本配置。
通用甘特图及其分层数据绑定。这个片段的80%是硬编码数据，旨在看起来真实*@ @code {public DateTime SelectedDate {get;设置;} = new DateTime(2019, 11,11,6,0,0);类FlatModel{公共int Id{获取;设置;}公共int?ParentId {get;设置; } public string Title { get; set; } public double PercentComplete { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } } public int LastId { get; set; } = 1; List Data { get; set; } protected override void OnInitialized() { Data = new List(); var random = new Random(); for (int i = 1; i < 6; i++) { var newItem = new FlatModel() { Id = LastId, Title = "Employee " + i.ToString(), Start = new DateTime(2020, 12, 10 + i), End = new DateTime(2020, 12, 11 + i), PercentComplete = Math.Round(random.NextDouble(), 2) }; Data.Add(newItem); var parentId = LastId; LastId++; for (int j = 0; j < 5; j++) { Data.Add(new FlatModel() { Id = LastId, ParentId = parentId, Title = " Employee " + i + " : " + j.ToString(), Start = new DateTime(2020, 12, 20 + j), End = new DateTime(2020, 12, 21 + i + j), PercentComplete = Math.Round(random.NextDouble(), 2) }); LastId++; } } base.OnInitialized(); } private void UpdateItem(GanttUpdateEventArgs args) { var item = args.Item as FlatModel; var foundItem = Data.FirstOrDefault(i => i.Id.Equals(item.Id)); if (foundItem != null) { foundItem.Title = item.Title; foundItem.Start = item.Start; foundItem.End = item.End; foundItem.PercentComplete = item.PercentComplete; } } private void DeleteItem(GanttDeleteEventArgs args) { var item = Data.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); RemoveChildRecursive(item); } private void RemoveChildRecursive(FlatModel item) { var children = Data.Where(i => item.Id.Equals(i.ParentId)).ToList(); foreach (var child in children) { RemoveChildRecursive(child); } Data.Remove(item); } } 数据绑定
若要在Telerik甘特图中显示数据，请定义GanttColumn实例——它们有一个模型场并公开设置以控制可见性列的显示数据的格式，以及文本对齐。
Telerik Blazor甘特图是数据源不可知的-您可以根据您的项目使用任何数据库和服务，您只需要在托管它的组件的视图模型中获取数据模型集合到甘特图。
以下资源列表提供了不同场景下数据绑定甘特图的示例:
关于数据绑定工作方式的一般信息-甘特图数据绑定概述．
绑定到自引用的平面数据源-将甘特图绑定到平面自引用数据．
使用带有嵌套在每个项中的项集合的分层数据源-将甘特图绑定到层次数据．
编辑
甘特图可以对其当前数据收集执行CRUD操作，并公开允许您控制操作并将更改传输到实际数据源的事件。控件中的两个任务都可以编辑TreeList以及他们各自在时间轴．
排序
甘特图可以自动对数据进行排序。阅读更多关于Blazor Gantt排序的信息．
过滤
甘特图可以自动过滤数据。阅读更多关于Blazor Gantt过滤．
模板
组件公开用于自定义时间轴项呈现。阅读更多关于Blazor Gantt模板．
工具栏
Blazor Gantt组件有一个用于定义用户操作的专用工具栏。目前，它们主要是自定义操作，但在未来的版本中，您将能够添加诸如导出之类的功能。
滚动
当总列宽度超过甘特图的宽度时，您将得到一个水平滚动条。当行高度超过甘特图的高度时，您将得到一个垂直滚动条。
甘特树
甘特树是甘特图的左边部分。通过其数据绑定选项提供数据的部分。阅读更多关于Blazor甘特树的信息．
甘特时间表
甘特时间轴在时间轴视图中提供了甘特记录的可视化表示。组件的右边部分。它的配置类似于调度器的时间表视图。阅读更多关于Blazor Gantt Timeline的信息．
甘特依赖关系
Blazor Gantt允许定义依赖项，这些依赖项在时间轴组件的部分。依赖关系表示两个任务之间的关系。阅读更多关于Blazor Gantt依赖．
事件
Blazor Gantt触发CUD、展开/折叠和TreeList窗格宽度更改事件。处理这些事件以响应用户操作。阅读更多关于Blazor Gantt事件．
甘特参考和方法
要执行甘特方法，请通过获取对组件实例的引用@ref．
甘特是一个通用部件。它的类型取决于它的模型的类型和对象的类型价值．如果你不能提供价值或数据最初，你需要将相应的类型设置为TItem而且TValue参数．
下表列出了甘特方法。亦请参阅甘特API．
| 方法 | 描述 |
|---|---|
重新绑定 |
刷新组件数据． |
GanttRef; }