甘特-刷新数据

使用ObservableCollection最常见的原因是让组件(如网格、树视图、树列表、下拉列表)在更改集合时发生变化或做出反应。

当您希望像这样刷新组件数据源时，需要注意两个重要的框架行为——ObservableCollection实例何时触发事件，以及当组件不是可观察集合时如何刷新组件的数据。

在本文中:

• 重新绑定的方法
• 可观测的数据
• 新典藏参考

重新绑定的方法

方法可以刷新数据重新绑定方法．使用组件引用调用重新绑定在进行数据更改(例如添加、删除项)后，请使用该方法。这是必要的，以防你不使用可观测的数据或重置集合引用．调用重新绑定将强制组件重新处理可用数据以反映更新。

@*添加/删除任务并重新绑定甘特以响应该更改。*@ 添加根任务 删除任务1                 @code {private TelerikGantt GanttRef;private List GanttData {get;设置;} private GanttView SelectedView {get;设置;} = GanttView.Week;private void AddRootTask() {var i = GanttData.Last()。Id + 1;GanttData。Insert(0,new FlatModel() { Id = i, ParentId = null, Title = "new task", PercentComplete = 0, Start = new DateTime(2021, 7, 5), End = new DateTime(2021, 7, 15) }); GanttRef.Rebind(); } private void RemoveTask() { var taskToRemove = GanttData.FirstOrDefault(x => x.Title == "Task 1"); GanttData.Remove(taskToRemove); GanttRef.Rebind(); } class FlatModel { public int Id { get; set; } public int? ParentId { get; set; } public string Title { get; set; } public double PercentComplete { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } } private int LastId { get; set; } = 1; protected override void OnInitialized() { GanttData = new List(); var random = new Random(); for (int i = 1; i < 6; i++) { var newItem = new FlatModel() { Id = LastId, Title = "Task " + i.ToString(), Start = new DateTime(2021, 7, 5 + i), End = new DateTime(2021, 7, 11 + i), PercentComplete = Math.Round(random.NextDouble(), 2) }; GanttData.Add(newItem); var parentId = LastId; LastId++; for (int j = 0; j < 5; j++) { GanttData.Add(new FlatModel() { Id = LastId, ParentId = parentId, Title = " Task " + i + " : " + j.ToString(), Start = new DateTime(2021, 7, 5 + j), End = new DateTime(2021, 7, 6 + i + j), PercentComplete = Math.Round(random.NextDouble(), 2) }); LastId++; } } base.OnInitialized(); } private void UpdateItem(GanttUpdateEventArgs args) { var item = args.Item as FlatModel; var foundItem = GanttData.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 = GanttData.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); RemoveChildRecursive(item); } private void RemoveChildRecursive(FlatModel item) { var children = GanttData.Where(i => item.Id.Equals(i.ParentId)).ToList(); foreach (var child in children) { RemoveChildRecursive(child); } GanttData.Remove(item); } }

可观测的数据

数据定位组件可以从实时数据中受益——当数据源集合发生变化时，组件应该更新以反映该变化。Blazor套件的Telerik UI中的大多数数据绑定组件都实现了这样的功能。

当数据组件的集合，该集合实现INotifyCollectionChanged接口(如ObservableCollection)，则Telerik组件订阅其CollectionChanged事件要更新。这意味着添加项、删除项或清除集合都会更新组件阀门()，.Remove ()而且.Clear ()方法)。

可观察对象集合触发CollectionChanged事件仅当添加，删除而且清晰的方法被调用。当您更改其中一个元素的字段值时，它们不会触发它。

@*添加/删除任务，以查看甘特对该更改的反应。*@ @using system . collect . objectmodel 添加根任务 删除任务1                  @code {private ObservableCollection GanttData {get;设置;} private GanttView SelectedView {get;设置;} = GanttView.Week;void AddRootTask() {var i = GanttData.Last()。Id + 1;GanttData。Insert(0,new FlatModel() {Id = i, ParentId = null, Title = "new task"， PercentComplete = 0, Start = new DateTime(2021, 7,5)， End = new DateTime(2021, 7,15)}); } private void RemoveTask() { var taskToRemove = GanttData.FirstOrDefault(x => x.Title == "Task 1"); GanttData.Remove(taskToRemove); } class FlatModel { public int Id { get; set; } public int? ParentId { get; set; } public string Title { get; set; } public double PercentComplete { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } } private int LastId { get; set; } = 1; protected override void OnInitialized() { GanttData = new ObservableCollection(); var random = new Random(); for (int i = 1; i < 6; i++) { var newItem = new FlatModel() { Id = LastId, Title = "Task " + i.ToString(), Start = new DateTime(2021, 7, 5 + i), End = new DateTime(2021, 7, 11 + i), PercentComplete = Math.Round(random.NextDouble(), 2) }; GanttData.Add(newItem); var parentId = LastId; LastId++; for (int j = 0; j < 5; j++) { GanttData.Add(new FlatModel() { Id = LastId, ParentId = parentId, Title = " Task " + i + " : " + j.ToString(), Start = new DateTime(2021, 7, 5 + j), End = new DateTime(2021, 7, 6 + i + j), PercentComplete = Math.Round(random.NextDouble(), 2) }); LastId++; } } base.OnInitialized(); } private void UpdateItem(GanttUpdateEventArgs args) { var item = args.Item as FlatModel; var foundItem = GanttData.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 = GanttData.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); RemoveChildRecursive(item); } private void RemoveChildRecursive(FlatModel item) { var children = GanttData.Where(i => item.Id.Equals(i.ParentId)).ToList(); foreach (var child in children) { RemoveChildRecursive(child); } GanttData.Remove(item); } }

如果需要向集合添加/从集合中删除许多项，请考虑创建一个新集合并提供其对data参数的引用。因此，组件将只重新呈现一次(当数据集合引用被更改时)，而不是响应Add/Remove事件重新呈现多次。

新典藏参考

在Blazor中，框架将触发OnParametersSet事件(这是子组件如何对外部更改做出反应)，仅当它可以通过相应的参数(如数据为Telerik组件的数据源)。该检测工作原理如下:

• 对于基本类型(如数字、字符串)，当它们的值发生变化时就会发生这种情况。

• 对于复杂类型(如数据集合，如列表，或任何IEnumerable，以及特定于应用程序的模型/对象)，当对象引用发生变化时就会发生这种情况。

  因此，您通常需要创建一个新视图模型字段的引用(例如TreeViewData = new List(theUpdatedDataCollection);)当你想更新组件时。

@*添加/删除任务并创建新的集合引用以响应该更改。*@ 添加根任务 删除任务1                 @code {private List GanttData {get;设置;} private GanttView SelectedView {get;设置;} = GanttView.Week;void AddRootTask() {var i = GanttData.Last()。Id + 1;GanttData。Insert(0, new FlatModel() {Id = i, ParentId = null, Title = "new task"， PercentComplete = 0, Start = new DateTime(2021, 7,5)， End = new DateTime(2021, 7,15)}); GanttData = new List(GanttData); } private void RemoveTask() { var taskToRemove = GanttData.FirstOrDefault(x => x.Title == "Task 1"); GanttData.Remove(taskToRemove); GanttData = new List(GanttData); } class FlatModel { public int Id { get; set; } public int? ParentId { get; set; } public string Title { get; set; } public double PercentComplete { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } } private int LastId { get; set; } = 1; protected override void OnInitialized() { GanttData = new List(); var random = new Random(); for (int i = 1; i < 6; i++) { var newItem = new FlatModel() { Id = LastId, Title = "Task " + i.ToString(), Start = new DateTime(2021, 7, 5 + i), End = new DateTime(2021, 7, 11 + i), PercentComplete = Math.Round(random.NextDouble(), 2) }; GanttData.Add(newItem); var parentId = LastId; LastId++; for (int j = 0; j < 5; j++) { GanttData.Add(new FlatModel() { Id = LastId, ParentId = parentId, Title = " Task " + i + " : " + j.ToString(), Start = new DateTime(2021, 7, 5 + j), End = new DateTime(2021, 7, 6 + i + j), PercentComplete = Math.Round(random.NextDouble(), 2) }); LastId++; } } base.OnInitialized(); } private void UpdateItem(GanttUpdateEventArgs args) { var item = args.Item as FlatModel; var foundItem = GanttData.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 = GanttData.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); RemoveChildRecursive(item); } private void RemoveChildRecursive(FlatModel item) { var children = GanttData.Where(i => item.Id.Equals(i.ParentId)).ToList(); foreach (var child in children) { RemoveChildRecursive(child); } GanttData.Remove(item); } }

另请参阅

• ObservableCollection
• INotifyCollectionChanged接口
• 现场演示