Skip to content

Commit 787a01a

Browse files
svdimitrntacheva
svdimitr
and
ntacheva
authored
Gantt dependencies (#495)
* feat(dependencies): inital commit * chore(dependencies): improvements * chore(dep): final commit * chore(config): update the config file * docs(gantt):minor fix * docs(gantt):refactored dependencies editing article * docs(gantt):fix: Co-authored-by: Nadezhda Tacheva <[email protected]>
1 parent 72f8b66 commit 787a01a

File tree

5 files changed

+706
-0
lines changed

5 files changed

+706
-0
lines changed

‎_config.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ navigation:
7676
"*components/gantt/gantt-tree":
7777
title: "Gantt Tree"
7878
position: 5
79+
"*components/gantt/dependencies":
80+
title: "Gantt Dependencies"
81+
position: 15
7982
"*components/gantt/timeline":
8083
title: "Gantt Timeline"
8184
position: 10

‎components/gantt/dependencies/databind.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
---
2+
title: Data Binding
3+
page_title: Gantt Dependencies - Data Binding
4+
description: Data Binding in the Gantt Dependencies.
5+
slug: gantt-dependencies-databind
6+
tags: telerik,blazor,gantt,chart,dependency,databind,data,databound
7+
published: True
8+
position: 5
9+
---
10+
11+
# Dependencies Data Binding
12+
13+
To bind a collection of dependencies to the Gantt Chart you should use the `Data` parameter, available for the `GanttDependencies` tag. This article explains how to use the data binding schema for the Gantt Dependencies.
14+
15+
## Gantt Dependencies Features:
16+
17+
* `Data` - `IEnumerable<Object>` - you can pass the collection of dependencies you would like to see rendered to the Data parameter.
18+
19+
* `IdField` - `string` - Unique identifier for each task. You can use it for editing and hierarchy.
20+
21+
* `PredecessorField` - `string` - Points to the predecessor task.
22+
23+
* `SuccessorField` - `string` - Points to the successor task.
24+
25+
>note To use the Data Binding for the Gantt Dependencies you must provide all data binding features listed above.
26+
27+
### Provide a collection of dependencies to the Gantt Chart
28+
29+
````CSHTML
30+
@* Bind a collection to the Data parameter of GanttDependencies. *@
31+
32+
<TelerikGantt Data="@Data"
33+
Width="100%"
34+
Height="600px"
35+
IdField="Id"
36+
ParentIdField="ParentId"
37+
Sortable="true"
38+
SortMode="@SortMode.Multiple"
39+
FilterMode="@GanttFilterMode.FilterMenu"
40+
FilterMenuType="@FilterMenuType.Menu">
41+
<GanttToolBar>
42+
<GanttCommandButton Command="Add" Icon="add">Add</GanttCommandButton>
43+
</GanttToolBar>
44+
<GanttViews>
45+
<GanttWeekView></GanttWeekView>
46+
<GanttMonthView></GanttMonthView>
47+
<GanttYearView></GanttYearView>
48+
</GanttViews>
49+
<GanttDependenciesSettings>
50+
<GanttDependencies Data="@Dependencies"
51+
PredecessorIdField="PredecessorId"
52+
SuccessorIdField="SuccessorId"
53+
TypeField="Type">
54+
</GanttDependencies>
55+
</GanttDependenciesSettings>
56+
<GanttColumns>
57+
<GanttColumn Field="Id"
58+
Visible="false">
59+
</GanttColumn>
60+
<GanttColumn Field="Title"
61+
Expandable="true"
62+
Width="160px"
63+
Title="Task Title">
64+
</GanttColumn>
65+
<GanttColumn Field="PercentComplete"
66+
Width="100px">
67+
</GanttColumn>
68+
<GanttColumn Field="Start"
69+
Width="100px"
70+
TextAlign="@ColumnTextAlign.Right">
71+
</GanttColumn>
72+
<GanttColumn Field="End"
73+
DisplayFormat="End: {0:d}"
74+
Width="100px">
75+
</GanttColumn>
76+
<GanttCommandColumn>
77+
<GanttCommandButton Command="Add" Icon="add"></GanttCommandButton>
78+
<GanttCommandButton Command="Delete" Icon="delete"></GanttCommandButton>
79+
</GanttCommandColumn>
80+
</GanttColumns>
81+
</TelerikGantt>
82+
83+
@code {
84+
public enum DependencyTypes
85+
{
86+
FinishFinish,
87+
FinishStart,
88+
StartStart,
89+
StartFinish
90+
};
91+
92+
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
93+
94+
class FlatModel
95+
{
96+
public int Id { get; set; }
97+
public int? ParentId { get; set; }
98+
public string Title { get; set; }
99+
public double PercentComplete { get; set; }
100+
public DateTime Start { get; set; }
101+
public DateTime End { get; set; }
102+
}
103+
104+
class DependencyModel
105+
{
106+
public int Id { get; set; }
107+
public int PredecessorId { get; set; }
108+
public int SuccessorId { get; set; }
109+
public DependencyTypes Type { get; set; }
110+
}
111+
112+
public int LastId { get; set; } = 1;
113+
public int LastDependencyId { get; set; } = 1;
114+
List<FlatModel> Data { get; set; }
115+
List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
116+
117+
protected override void OnInitialized()
118+
{
119+
Data = new List<FlatModel>();
120+
121+
for (int i = 1; i < 6; i++)
122+
{
123+
var newItem = new FlatModel()
124+
{
125+
Id = LastId,
126+
Title = "Employee " + i.ToString(),
127+
Start = new DateTime(2020, 12, 6 + i),
128+
End = new DateTime(2020, 12, 11 + i),
129+
PercentComplete = i * 0.125
130+
};
131+
132+
Data.Add(newItem);
133+
var parentId = LastId;
134+
LastId++;
135+
136+
for (int j = 0; j < 5; j++)
137+
{
138+
Data.Add(new FlatModel()
139+
{
140+
Id = LastId,
141+
ParentId = parentId,
142+
Title = " Employee " + i + " : " + j.ToString(),
143+
Start = new DateTime(2020, 12, 6 + i + j),
144+
End = new DateTime(2020, 12, 7 + i + j),
145+
PercentComplete = j * 0.225
146+
});
147+
148+
LastId++;
149+
}
150+
}
151+
152+
Dependencies.Add(new DependencyModel()
153+
{
154+
Id = LastDependencyId++,
155+
PredecessorId = 3,
156+
SuccessorId = 4,
157+
Type = DependencyTypes.FinishFinish
158+
});
159+
160+
Dependencies.Add(new DependencyModel()
161+
{
162+
Id = LastDependencyId++,
163+
PredecessorId = 2,
164+
SuccessorId = 5,
165+
Type = DependencyTypes.StartFinish
166+
});
167+
168+
base.OnInitialized();
169+
}
170+
}
171+
````
172+

‎components/gantt/dependencies/editing.md‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
---
2+
title: Editing
3+
page_title: Gantt Dependencies - Editing
4+
description: Create and Delete Dependencies.
5+
slug: gantt-dependencies-editing
6+
tags: telerik,blazor,gantt,chart,dependency,edit,editing,dependencies
7+
published: True
8+
position: 15
9+
---
10+
11+
# Dependencies Editing
12+
13+
The Gantt Chart component allows you delete its dependencies and create new ones. It exposes dedicated events for dependency editing that you can use to transfer the changes to the underlying data source.
14+
15+
Sections in this article:
16+
17+
* [Basics](#basics)
18+
19+
* [Example](#example)
20+
21+
## Basics
22+
23+
This section explains the available events that you need to use for creating and deleting the Gannt dependencies. After that, you will find a code example.
24+
25+
List of the available events:
26+
27+
* `OnCreate` - fires when the users drag the dependency handle of a task from one end-point to another and thus create a new dependency. It provides a `GanttDependencyCreateEventArgs` object that contains the currently created dependency.
28+
29+
30+
* `OnDelete` - fires when the users deletes a dependency. To delete a dependency the user should select it using the mouse and press the `Delete` keyboard button. It provides a `GanttDependencyDeleteEventArgs` object that contains the currently deleted dependency in the `Item` field that you can cast to your model.
31+
32+
## Example
33+
34+
````CSHTML
35+
@* Drag the dependency handle of a task to a new end-point to fire the Oncreate event. Delete a dependency to fire the OnDelete event *@
36+
37+
<TelerikGantt Data="@Data"
38+
Width="100%"
39+
Height="600px"
40+
IdField="Id"
41+
ParentIdField="ParentId"
42+
Sortable="true"
43+
SortMode="@SortMode.Multiple"
44+
FilterMode="@GanttFilterMode.FilterMenu"
45+
FilterMenuType="@FilterMenuType.Menu">
46+
<GanttToolBar>
47+
<GanttCommandButton Command="Add" Icon="add">Add</GanttCommandButton>
48+
</GanttToolBar>
49+
<GanttViews>
50+
<GanttWeekView></GanttWeekView>
51+
<GanttMonthView></GanttMonthView>
52+
<GanttYearView></GanttYearView>
53+
</GanttViews>
54+
<GanttDependenciesSettings>
55+
<GanttDependencies Data="@Dependencies"
56+
PredecessorIdField="PredecessorId"
57+
SuccessorIdField="SuccessorId"
58+
TypeField="Type"
59+
OnCreate="@CreateDependency"
60+
OnDelete="@DeleteDependency">
61+
</GanttDependencies>
62+
</GanttDependenciesSettings>
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="100px">
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+
92+
private void CreateDependency(GanttDependencyCreateEventArgs args)
93+
{
94+
var dependency = new DependencyModel()
95+
{
96+
Id = LastDependencyId++,
97+
PredecessorId = (int)args.PredecessorId,
98+
SuccessorId = (int)args.SuccessorId,
99+
Type = args.Type
100+
};
101+
102+
Dependencies.Add(dependency);
103+
}
104+
105+
private void DeleteDependency(GanttDependencyDeleteEventArgs args)
106+
{
107+
Dependencies.RemoveAll(d => d.Id.Equals((args.Item as DependencyModel).Id));
108+
}
109+
110+
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
111+
112+
class FlatModel
113+
{
114+
public int Id { get; set; }
115+
public int? ParentId { get; set; }
116+
public string Title { get; set; }
117+
public double PercentComplete { get; set; }
118+
public DateTime Start { get; set; }
119+
public DateTime End { get; set; }
120+
}
121+
122+
class DependencyModel
123+
{
124+
public int Id { get; set; }
125+
public int PredecessorId { get; set; }
126+
public int SuccessorId { get; set; }
127+
public int Type { get; set; }
128+
}
129+
130+
public int LastId { get; set; } = 1;
131+
public int LastDependencyId { get; set; } = 1;
132+
List<FlatModel> Data { get; set; }
133+
List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
134+
135+
protected override void OnInitialized()
136+
{
137+
Data = new List<FlatModel>();
138+
139+
for (int i = 1; i < 6; i++)
140+
{
141+
var newItem = new FlatModel()
142+
{
143+
Id = LastId,
144+
Title = "Employee " + i.ToString(),
145+
Start = new DateTime(2020, 12, 6 + i),
146+
End = new DateTime(2020, 12, 11 + i),
147+
PercentComplete = i * 0.125
148+
};
149+
150+
Data.Add(newItem);
151+
var parentId = LastId;
152+
LastId++;
153+
154+
for (int j = 0; j < 5; j++)
155+
{
156+
Data.Add(new FlatModel()
157+
{
158+
Id = LastId,
159+
ParentId = parentId,
160+
Title = " Employee " + i + " : " + j.ToString(),
161+
Start = new DateTime(2020, 12, 6 + i + j),
162+
End = new DateTime(2020, 12, 7 + i + j),
163+
PercentComplete = j * 0.225
164+
});
165+
166+
LastId++;
167+
}
168+
}
169+
170+
Dependencies.Add(new DependencyModel()
171+
{
172+
Id = LastDependencyId++,
173+
PredecessorId = 3,
174+
SuccessorId = 4,
175+
Type = 0
176+
});
177+
178+
Dependencies.Add(new DependencyModel()
179+
{
180+
Id = LastDependencyId++,
181+
PredecessorId = 2,
182+
SuccessorId = 5,
183+
Type = 2
184+
});
185+
186+
base.OnInitialized();
187+
}
188+
}
189+
````

0 commit comments

Comments
 (0)