Skip to content

Commit da5b6b7

Browse files
author
Apostolos Giatsidis
authored
[3.1]docs(gantt): document new enhancements (#804)
* docs(gantt): document new enhancements * docs(gantt): article improvements * docs(gantt): fixed popup edit description
1 parent c0a1a82 commit da5b6b7

File tree

14 files changed

+2686
-15
lines changed

14 files changed

+2686
-15
lines changed

‎components/gantt/events.md

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
---
2+
title: Events
3+
page_title: Gantt - Events
4+
description: Events of the Gantt for Blazor
5+
slug: gantt-events
6+
tags: telerik,blazor,gantt,events
7+
published: True
8+
position: 20
9+
---
10+
11+
# Gantt Events
12+
13+
This article explains the events available in the Telerik Gantt for Blazor. They are grouped logically.
14+
15+
* [CUD Event](#cud-events) - events related to Creating, Updating and Deleting items
16+
* [OnExpand and OnCollapse](#onexpand-and-oncollapse) - events related to Expanding and Collapsing Gantt Tree items
17+
18+
## CUD Events
19+
20+
The `OnCreate`, `OnUpdate` and `OnDelete` events lets you get the data item that the user changed so you can transfer the user action to the actual data source.
21+
22+
The `OnEdit` event lets you respond to user actions when they want to edit an item. For example, you can use it to prevent editing of certain items based on some condition.
23+
24+
You can read more about the CUD events in the [Gantt Tree Editing Overview]({%slug gantt-tree-editing%}) article.
25+
26+
27+
## OnExpand and OnCollapse
28+
29+
The `OnExpand` and `OnCollapse` events fire as a response to the user expanding and collapsing an item of the Gant Tree.
30+
31+
The event handlers receive arguments of type `GanttExpandEventArgs` and `GanttCollapseEventArgs` respectively which exposes the following fields:
32+
* `Item` - an object you can cast to your model class to obtain the current data item.
33+
* `ShouldRender` - a boolean field indicating whether the component will re-render.
34+
35+
The `OnCollapse` event fires as a response to the user collapsing an item of the Gant Tree.
36+
37+
38+
>caption Handle OnExpand and OnCollapse events
39+
````CSHTML
40+
@eventActions
41+
42+
<TelerikGantt Data="@Data"
43+
Width="1200px"
44+
Height="600px"
45+
IdField="Id"
46+
ParentIdField="ParentId"
47+
48+
OnExpand="@OnItemExpand"
49+
OnCollapse="@OnItemCollapse"
50+
51+
OnUpdate="@UpdateItem"
52+
OnDelete="@DeleteItem"
53+
OnCreate="@CreateItem">
54+
<GanttToolBar>
55+
<GanttCommandButton Command="Add" Icon="add">Add</GanttCommandButton>
56+
</GanttToolBar>
57+
<GanttViews>
58+
<GanttDayView></GanttDayView>
59+
<GanttWeekView></GanttWeekView>
60+
<GanttMonthView></GanttMonthView>
61+
<GanttYearView></GanttYearView>
62+
</GanttViews>
63+
<GanttColumns>
64+
<GanttColumn Field="Id"
65+
Visible="false">
66+
</GanttColumn>
67+
<GanttColumn Field="Title"
68+
Expandable="true"
69+
Width="160px"
70+
Title="Task Title" >
71+
</GanttColumn>
72+
<GanttColumn Field="PercentComplete"
73+
Width="60px">
74+
</GanttColumn>
75+
<GanttColumn Field="Start"
76+
Width="100px"
77+
TextAlign="@ColumnTextAlign.Right">
78+
</GanttColumn>
79+
<GanttColumn Field="End"
80+
DisplayFormat="End: {0:d}"
81+
Width="100px">
82+
</GanttColumn>
83+
<GanttCommandColumn>
84+
<GanttCommandButton Command="Add" Icon="add"></GanttCommandButton>
85+
<GanttCommandButton Command="Delete" Icon="delete"></GanttCommandButton>
86+
</GanttCommandColumn>
87+
</GanttColumns>
88+
</TelerikGantt>
89+
90+
@code {
91+
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
92+
93+
public string eventActions { get; set; }
94+
95+
class FlatModel
96+
{
97+
public int Id { get; set; }
98+
public int? ParentId { get; set; }
99+
public string Title { get; set; }
100+
public double PercentComplete { get; set; }
101+
public DateTime Start { get; set; }
102+
public DateTime End { get; set; }
103+
}
104+
105+
public int LastId { get; set; } = 1;
106+
List<FlatModel> Data { get; set; }
107+
108+
protected override void OnInitialized()
109+
{
110+
Data = new List<FlatModel>();
111+
var random = new Random();
112+
113+
for (int i = 1; i < 6; i++)
114+
{
115+
var newItem = new FlatModel()
116+
{
117+
Id = LastId,
118+
Title = "Employee " + i.ToString(),
119+
Start = new DateTime(2020, 12, 6 + i),
120+
End = new DateTime(2020, 12, 11 + i),
121+
PercentComplete = Math.Round(random.NextDouble(), 2)
122+
};
123+
124+
Data.Add(newItem);
125+
var parentId = LastId;
126+
LastId++;
127+
128+
for (int j = 0; j < 5; j++)
129+
{
130+
Data.Add(new FlatModel()
131+
{
132+
Id = LastId,
133+
ParentId = parentId,
134+
Title = " Employee " + i + " : " + j.ToString(),
135+
Start = new DateTime(2020, 12, 6 + i + j),
136+
End = new DateTime(2020, 12, 7 + i + j),
137+
PercentComplete = Math.Round(random.NextDouble(), 2)
138+
});
139+
140+
LastId++;
141+
}
142+
}
143+
144+
base.OnInitialized();
145+
}
146+
147+
private async Task CreateItem(GanttCreateEventArgs args)
148+
{
149+
var argsItem = args.Item as FlatModel;
150+
151+
argsItem.Id = LastId++;
152+
153+
if (args.ParentItem != null)
154+
{
155+
var parent = (FlatModel)args.ParentItem;
156+
157+
argsItem.ParentId = parent.Id;
158+
}
159+
160+
Data.Insert(0, argsItem);
161+
162+
CalculateParentPercentRecursive(argsItem);
163+
CalculateParentRangeRecursive(argsItem);
164+
}
165+
166+
private async Task UpdateItem(GanttUpdateEventArgs args)
167+
{
168+
var item = args.Item as FlatModel;
169+
170+
var foundItem = Data.FirstOrDefault(i => i.Id.Equals(item.Id));
171+
172+
if (foundItem != null)
173+
{
174+
var startOffset = item.Start - foundItem.Start;
175+
if (startOffset != TimeSpan.Zero)
176+
{
177+
MoveChildrenRecursive(foundItem, startOffset);
178+
}
179+
180+
foundItem.Title = item.Title;
181+
foundItem.Start = item.Start;
182+
foundItem.End = item.End;
183+
foundItem.PercentComplete = item.PercentComplete;
184+
}
185+
186+
CalculateParentPercentRecursive(foundItem);
187+
CalculateParentRangeRecursive(foundItem);
188+
}
189+
190+
private async Task DeleteItem(GanttDeleteEventArgs args)
191+
{
192+
var item = Data.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id));
193+
194+
RemoveChildRecursive(item);
195+
196+
CalculateParentPercentRecursive(item);
197+
CalculateParentRangeRecursive(item);
198+
}
199+
200+
public void OnItemExpand(GanttExpandEventArgs args)
201+
{
202+
var item = args.Item as FlatModel;
203+
eventActions = $"The user expanded {item.Title} with ID {item.Id}";
204+
}
205+
206+
public void OnItemCollapse(GanttCollapseEventArgs args)
207+
{
208+
var item = args.Item as FlatModel;
209+
eventActions = $"The user collapsed {item.Title} with ID {item.Id}";
210+
}
211+
212+
private void RemoveChildRecursive(FlatModel item)
213+
{
214+
var children = GetChildren(item).ToList();
215+
216+
foreach (var child in children)
217+
{
218+
RemoveChildRecursive(child);
219+
}
220+
221+
Data.Remove(item);
222+
}
223+
224+
private void CalculateParentPercentRecursive(FlatModel item)
225+
{
226+
if (item.ParentId != null)
227+
{
228+
var parent = GetParent(item);
229+
230+
var children = GetChildren(parent);
231+
232+
if (children.Any())
233+
{
234+
parent.PercentComplete = children.Average(i => i.PercentComplete);
235+
236+
CalculateParentPercentRecursive(parent);
237+
}
238+
}
239+
}
240+
241+
private void CalculateParentRangeRecursive(FlatModel item)
242+
{
243+
if (item.ParentId != null)
244+
{
245+
var parent = GetParent(item);
246+
247+
var children = GetChildren(parent);
248+
249+
if (children.Any())
250+
{
251+
parent.Start = children.Min(i => i.Start);
252+
parent.End = children.Max(i => i.End);
253+
254+
CalculateParentRangeRecursive(parent);
255+
}
256+
}
257+
}
258+
259+
private void MoveChildrenRecursive(FlatModel item, TimeSpan offset)
260+
{
261+
var children = GetChildren(item);
262+
263+
foreach (var child in children)
264+
{
265+
child.Start = child.Start.Add(offset);
266+
child.End = child.End.Add(offset);
267+
268+
MoveChildrenRecursive(child, offset);
269+
}
270+
}
271+
272+
private FlatModel GetParent(FlatModel item)
273+
{
274+
return Data.FirstOrDefault(i => i.Id.Equals(item.ParentId));
275+
}
276+
277+
private IEnumerable<FlatModel> GetChildren(FlatModel item)
278+
{
279+
return Data.Where(i => item.Id.Equals(i.ParentId));
280+
}
281+
}
282+
````
283+
284+
## See Also
285+
286+
* [Live Demo: Gantt Events](https://demos.telerik.com/blazor-ui/gantt/events)

0 commit comments

Comments
 (0)