Skip to content

Commit b38cb15

Browse files
dimodidimodi
committed
doc(common): Breaking changes in v7 continued
1 parent 2b5db9b commit b38cb15

File tree

6 files changed

+209
-507
lines changed

6 files changed

+209
-507
lines changed

‎components/gantt/dependencies/databind.md‎

Lines changed: 98 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ slug: gantt-dependencies-databind
66
tags: telerik,blazor,gantt,chart,dependency,databind,data,databound
77
published: True
88
position: 5
9+
previous_url: /components/gantt/dependencies/types
910
---
1011

1112
# Dependencies Data Binding
@@ -18,10 +19,11 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
1819

1920
| Feature | Type | Description |
2021
| --- | --- | --- |
21-
| `Data` | `IEnumerable<Object>` | The collection of dependencies. |
22+
| `Data` | `IEnumerable<object>` | The collection of dependencies. |
2223
| `IdField` | `string` | Unique identifier for each task. Use it for editing and hierarchy. |
2324
| `PredecessorField` | `string` | Points to the predecessor task. |
2425
| `SuccessorField` | `string` | Points to the successor task. |
26+
| `TypeField` | `GanttDependencyType` enum | Points to the dependency type, which is the relationship between the two affected tasks. The supported values include `FinishFinish`, `FinishStart`, `StartStart`, and `StartFinish`. |
2527

2628
>note To use the Data Binding for the Gantt Dependencies you must provide all data binding features listed above.
2729
@@ -30,144 +32,150 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
3032
````CSHTML
3133
@* Bind a collection to the Data parameter of GanttDependencies. *@
3234
33-
<TelerikGantt Data="@Data"
34-
Width="100%"
35+
<TelerikGantt Data="@GanttData"
3536
Height="600px"
36-
IdField="Id"
37-
ParentIdField="ParentId"
37+
IdField="@nameof(GanttFlatModel.Id)"
38+
ParentIdField="nameof(GanttFlatModel.ParentId)"
3839
Sortable="true"
3940
SortMode="@SortMode.Multiple"
4041
FilterMode="@GanttFilterMode.FilterMenu"
41-
FilterMenuType="@FilterMenuType.Menu">
42-
<GanttToolBarTemplate>
43-
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
44-
</GanttToolBarTemplate>
42+
FilterMenuType="@FilterMenuType.Menu"
43+
OnEdit="@( (GanttEditEventArgs args) => args.IsCancelled = true )">
4544
<GanttViews>
4645
<GanttWeekView></GanttWeekView>
4746
<GanttMonthView></GanttMonthView>
4847
<GanttYearView></GanttYearView>
4948
</GanttViews>
5049
<GanttDependenciesSettings>
5150
<GanttDependencies Data="@Dependencies"
52-
PredecessorIdField="PredecessorId"
53-
SuccessorIdField="SuccessorId"
54-
TypeField="Type">
51+
IdField="@nameof(GanttDependencyModel.Id)"
52+
PredecessorIdField="@nameof(GanttDependencyModel.PredecessorId)"
53+
SuccessorIdField="@nameof(GanttDependencyModel.SuccessorId)"
54+
TypeField="@nameof(GanttDependencyModel.Type)">
5555
</GanttDependencies>
5656
</GanttDependenciesSettings>
5757
<GanttColumns>
58-
<GanttColumn Field="Id"
58+
<GanttColumn Field="@nameof(GanttFlatModel.Id)"
5959
Visible="false">
6060
</GanttColumn>
61-
<GanttColumn Field="Title"
61+
<GanttColumn Field="@nameof(GanttFlatModel.Title)"
6262
Expandable="true"
63-
Width="160px"
63+
Width="120px"
6464
Title="Task Title">
6565
</GanttColumn>
66-
<GanttColumn Field="PercentComplete"
67-
Width="100px">
66+
<GanttColumn Field="@nameof(GanttFlatModel.PercentComplete)"
67+
Title="Complete"
68+
TextAlign="@ColumnTextAlign.Right"
69+
DisplayFormat="{0:p0}"
70+
Width="80px">
6871
</GanttColumn>
69-
<GanttColumn Field="Start"
70-
Width="100px"
71-
TextAlign="@ColumnTextAlign.Right">
72+
<GanttColumn Field="@nameof(GanttFlatModel.Start)"
73+
Width="80px"
74+
DisplayFormat="{0:d}">
7275
</GanttColumn>
73-
<GanttColumn Field="End"
74-
DisplayFormat="End: {0:d}"
75-
Width="100px">
76+
<GanttColumn Field="@nameof(GanttFlatModel.End)"
77+
DisplayFormat="{0:d}"
78+
Width="80px">
7679
</GanttColumn>
77-
<GanttCommandColumn>
78-
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
79-
<GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
80-
</GanttCommandColumn>
8180
</GanttColumns>
8281
</TelerikGantt>
8382
84-
@code {
85-
public enum DependencyTypes
86-
{
87-
FinishFinish,
88-
FinishStart,
89-
StartStart,
90-
StartFinish
91-
};
92-
93-
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
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-
}
83+
@code {
84+
private List<GanttFlatModel> GanttData { get; set; } = new();
85+
private List<GanttDependencyModel> Dependencies { get; set; } = new();
10486
105-
class DependencyModel
106-
{
107-
public int Id { get; set; }
108-
public int PredecessorId { get; set; }
109-
public int SuccessorId { get; set; }
110-
public DependencyTypes Type { get; set; }
111-
}
87+
public int LastId { get; set; }
88+
public int LastDependencyId { get; set; }
11289
113-
public int LastId { get; set; } = 1;
114-
public int LastDependencyId { get; set; } = 1;
115-
List<FlatModel> Data { get; set; }
116-
List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
90+
private int NextYear { get; set; } = DateTime.Today.AddYears(1).Year;
11791
11892
protected override void OnInitialized()
11993
{
120-
Data = new List<FlatModel>();
94+
GanttData = new List<GanttFlatModel>();
12195
122-
for (int i = 1; i < 6; i++)
96+
for (int i = 1; i <= 3; i++)
12397
{
124-
var newItem = new FlatModel()
98+
GanttData.Add(new GanttFlatModel()
12599
{
126-
Id = LastId,
127-
Title = "Employee " + i.ToString(),
128-
Start = new DateTime(2020, 12, 6 + i),
129-
End = new DateTime(2020, 12, 11 + i),
100+
Id = ++LastId,
101+
Title = $"Task {i}",
102+
Start = new DateTime(NextYear, 1, 6 + i),
103+
End = new DateTime(NextYear, 1, 11 + i),
130104
PercentComplete = i * 0.125
131-
};
105+
});
132106
133-
Data.Add(newItem);
134107
var parentId = LastId;
135-
LastId++;
136108
137-
for (int j = 0; j < 5; j++)
109+
for (int j = 1; j <= 3; j++)
138110
{
139-
Data.Add(new FlatModel()
111+
GanttData.Add(new GanttFlatModel()
140112
{
141-
Id = LastId,
113+
Id = ++LastId,
142114
ParentId = parentId,
143-
Title = " Employee " + i + " : " + j.ToString(),
144-
Start = new DateTime(2020, 12, 6 + i + j),
145-
End = new DateTime(2020, 12, 7 + i + j),
115+
Title = $"Task {i} : {j}",
116+
Start = new DateTime(NextYear, 1, 6 + i + j),
117+
End = new DateTime(NextYear, 1, 7 + i + j),
146118
PercentComplete = j * 0.225
147119
});
148120
149-
LastId++;
121+
if (i == 1 && j > 1)
122+
{
123+
Dependencies.Add(new GanttDependencyModel()
124+
{
125+
Id = ++LastDependencyId,
126+
PredecessorId = LastId - 1,
127+
SuccessorId = LastId,
128+
Type = GanttDependencyType.FinishStart
129+
});
130+
}
131+
132+
if (i == 2 && j > 1)
133+
{
134+
Dependencies.Add(new GanttDependencyModel()
135+
{
136+
Id = ++LastDependencyId,
137+
PredecessorId = LastId - 1,
138+
SuccessorId = LastId,
139+
Type = GanttDependencyType.FinishFinish
140+
});
141+
}
142+
143+
if (i == 3 && j > 1)
144+
{
145+
Dependencies.Add(new GanttDependencyModel()
146+
{
147+
Id = ++LastDependencyId,
148+
PredecessorId = LastId - 1,
149+
SuccessorId = LastId,
150+
Type = GanttDependencyType.StartStart
151+
});
152+
}
150153
}
151154
}
152155
153-
Dependencies.Add(new DependencyModel()
154-
{
155-
Id = LastDependencyId++,
156-
PredecessorId = 3,
157-
SuccessorId = 4,
158-
Type = DependencyTypes.FinishFinish
159-
});
156+
base.OnInitialized();
157+
}
160158
161-
Dependencies.Add(new DependencyModel()
162-
{
163-
Id = LastDependencyId++,
164-
PredecessorId = 2,
165-
SuccessorId = 5,
166-
Type = DependencyTypes.StartFinish
167-
});
159+
class GanttFlatModel
160+
{
161+
public int Id { get; set; }
162+
public int? ParentId { get; set; }
163+
public string Title { get; set; } = string.Empty;
164+
public double PercentComplete { get; set; }
165+
public DateTime Start { get; set; }
166+
public DateTime End { get; set; }
167+
}
168168
169-
base.OnInitialized();
169+
class GanttDependencyModel
170+
{
171+
public int Id { get; set; }
172+
public int PredecessorId { get; set; }
173+
public int SuccessorId { get; set; }
174+
public GanttDependencyType Type { get; set; }
170175
}
171176
}
172177
````
173178

179+
## Next Steps
180+
181+
* [Explore Gantt dependency editing]({%slug gantt-dependencies-editing%})

0 commit comments

Comments
 (0)