diff --git a/_config.yml b/_config.yml index ccc0f4adcf..01ec88af24 100644 --- a/_config.yml +++ b/_config.yml @@ -76,6 +76,9 @@ navigation: "*components/gantt/gantt-tree": title: "Gantt Tree" position: 5 + "*components/gantt/dependencies": + title: "Gantt Dependencies" + position: 15 "*components/gantt/timeline": title: "Gantt Timeline" position: 10 diff --git a/components/gantt/dependencies/databind.md b/components/gantt/dependencies/databind.md new file mode 100644 index 0000000000..1ae6762684 --- /dev/null +++ b/components/gantt/dependencies/databind.md @@ -0,0 +1,172 @@ +--- +title: Data Binding +page_title: Gantt Dependencies - Data Binding +description: Data Binding in the Gantt Dependencies. +slug: gantt-dependencies-databind +tags: telerik,blazor,gantt,chart,dependency,databind,data,databound +published: True +position: 5 +--- + +# Dependencies Data Binding + +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. + +## Gantt Dependencies Features: + +* `Data` - `IEnumerable` - you can pass the collection of dependencies you would like to see rendered to the Data parameter. + +* `IdField` - `string` - Unique identifier for each task. You can use it for editing and hierarchy. + +* `PredecessorField` - `string` - Points to the predecessor task. + +* `SuccessorField` - `string` - Points to the successor task. + +>note To use the Data Binding for the Gantt Dependencies you must provide all data binding features listed above. + +### Provide a collection of dependencies to the Gantt Chart + +````CSHTML +@* Bind a collection to the Data parameter of GanttDependencies. *@ + + + + Add + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public enum DependencyTypes + { + FinishFinish, + FinishStart, + StartStart, + StartFinish + }; + + public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + + 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; } + } + + class DependencyModel + { + public int Id { get; set; } + public int PredecessorId { get; set; } + public int SuccessorId { get; set; } + public DependencyTypes Type { get; set; } + } + + public int LastId { get; set; } = 1; + public int LastDependencyId { get; set; } = 1; + List Data { get; set; } + List Dependencies { get; set; } = new List(); + + protected override void OnInitialized() + { + Data = new List(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Employee " + i.ToString(), + Start = new DateTime(2020, 12, 6 + i), + End = new DateTime(2020, 12, 11 + i), + PercentComplete = i * 0.125 + }; + + 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, 6 + i + j), + End = new DateTime(2020, 12, 7 + i + j), + PercentComplete = j * 0.225 + }); + + LastId++; + } + } + + Dependencies.Add(new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = 3, + SuccessorId = 4, + Type = DependencyTypes.FinishFinish + }); + + Dependencies.Add(new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = 2, + SuccessorId = 5, + Type = DependencyTypes.StartFinish + }); + + base.OnInitialized(); + } +} +```` + diff --git a/components/gantt/dependencies/editing.md b/components/gantt/dependencies/editing.md new file mode 100644 index 0000000000..5c9ddd3af2 --- /dev/null +++ b/components/gantt/dependencies/editing.md @@ -0,0 +1,189 @@ +--- +title: Editing +page_title: Gantt Dependencies - Editing +description: Create and Delete Dependencies. +slug: gantt-dependencies-editing +tags: telerik,blazor,gantt,chart,dependency,edit,editing,dependencies +published: True +position: 15 +--- + +# Dependencies Editing + +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. + +Sections in this article: + +* [Basics](#basics) + +* [Example](#example) + +## Basics + +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. + +List of the available events: + +* `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. + + +* `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. + +## Example + +````CSHTML +@* 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 *@ + + + + Add + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + + private void CreateDependency(GanttDependencyCreateEventArgs args) + { + var dependency = new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = (int)args.PredecessorId, + SuccessorId = (int)args.SuccessorId, + Type = args.Type + }; + + Dependencies.Add(dependency); + } + + private void DeleteDependency(GanttDependencyDeleteEventArgs args) + { + Dependencies.RemoveAll(d => d.Id.Equals((args.Item as DependencyModel).Id)); + } + + public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + + 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; } + } + + class DependencyModel + { + public int Id { get; set; } + public int PredecessorId { get; set; } + public int SuccessorId { get; set; } + public int Type { get; set; } + } + + public int LastId { get; set; } = 1; + public int LastDependencyId { get; set; } = 1; + List Data { get; set; } + List Dependencies { get; set; } = new List(); + + protected override void OnInitialized() + { + Data = new List(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Employee " + i.ToString(), + Start = new DateTime(2020, 12, 6 + i), + End = new DateTime(2020, 12, 11 + i), + PercentComplete = i * 0.125 + }; + + 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, 6 + i + j), + End = new DateTime(2020, 12, 7 + i + j), + PercentComplete = j * 0.225 + }); + + LastId++; + } + } + + Dependencies.Add(new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = 3, + SuccessorId = 4, + Type = 0 + }); + + Dependencies.Add(new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = 2, + SuccessorId = 5, + Type = 2 + }); + + base.OnInitialized(); + } +} +```` diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md new file mode 100644 index 0000000000..37a4b7f764 --- /dev/null +++ b/components/gantt/dependencies/overview.md @@ -0,0 +1,29 @@ +--- +title: Overview +page_title: Gantt Chart - Dependencies +description: Overview of the Dependencies for the Gantt Chart for Blazor. +slug: gantt-dependencies-overview +tags: telerik,blazor,gantt,chart,dependencies +published: True +position: 0 +--- + +# Gantt Dependencies + +The Telerik Gantt for Blazor allows you define dependencies, which are rendered in the [Timeline]({%slug gantt-timeline%}) section of the component. A dependency represents a relation between two tasks. The direction of the arrow indicates which task is dependent on the other. You can bind a [data collection]({%slug gantt-dependencies-databind%}), define different [types]({%slug gantt-dependencies-types%}) of dependencies, and allow your users to [edit]({%slug gantt-dependencies-editing%}) the dependencies. + + +#### To define dependencies in your Gantt Chart + +* Add the `GanttDependenciesSettings` tag, child tag of the `` +* Inside the `GanttDependenciesSettings` add the `` and provide a data collection to the `Data` parameter. + + +## Gantt Dependencies Features: + +* Data Binding - You can provide a collection of dependencies to the Gantt Chart for Blazor. For more information read the [Data Binding]({%slug gantt-dependencies-databind%}) article. + +* `TypeField` - `string` - Defines the dependency type. For more information read the [Types]({%slug gantt-dependencies-types%}) article. + +* `Editing` - You can allow the user edit the dependencies. For more information read the [Editing]({%slug gantt-dependencies-editing%}) article. + diff --git a/components/gantt/dependencies/types.md b/components/gantt/dependencies/types.md new file mode 100644 index 0000000000..c87daff8a3 --- /dev/null +++ b/components/gantt/dependencies/types.md @@ -0,0 +1,313 @@ +--- +title: Types +page_title: Gantt Dependencies - Types +description: Overview of the Dependency Types for the Gantt Chart for Blazor. +slug: gantt-dependencies-types +tags: telerik,blazor,gantt,chart,dependency,types +published: True +position: 10 +--- + +# Types + +The Telerik Gantt Chart for Blazor allows you to define four distinct types of dependencies. To define the dependency type use the `TypeField`, a parameter available on the `GanttDependencies` tag. The parameter accepts `int` and `enum` as values and can be one of the following: + +* `FinishFinish` - `0` - A line from the end date of the predecessor to the end date of the successor. + +* `FinishStart` - `1` - A line from the end date of the predecessor to the start date of the successor. + +* `StartStart` - `2` - A line from the start date of the predecessor to the start date of the successor. + +* `StartFinish` - `3` - A line from the start date of the predecessor to the end date of the successor. + +## Examples + +This section showcases both ways to define the dependency type - by using an `int`, and an `enum`: + +* [Use an int to define the dependency type](#use-an-int-to-define-the-dependency-type) +* [Use an enum to define the dependency type](#use-an-enum-to-define-the-dependency-type) + +### Use an int to define the dependency type + +````CSHTML +@* Set the dependency type to FinishStart *@ + + + + Add + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + + 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; } + } + + class DependencyModel + { + public int Id { get; set; } + public int PredecessorId { get; set; } + public int SuccessorId { get; set; } + public int Type { get; set; } + } + + public int LastId { get; set; } = 1; + public int LastDependencyId { get; set; } = 1; + List Data { get; set; } + List Dependencies { get; set; } = new List(); + + protected override void OnInitialized() + { + Data = new List(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Employee " + i.ToString(), + Start = new DateTime(2020, 12, 6 + i), + End = new DateTime(2020, 12, 11 + i), + PercentComplete = i * 0.125 + }; + + 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, 6 + i + j), + End = new DateTime(2020, 12, 7 + i + j), + PercentComplete = j * 0.225 + }); + + LastId++; + } + } + + Dependencies.Add(new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = 3, + SuccessorId = 4, + Type = 1 + }); + + Dependencies.Add(new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = 2, + SuccessorId = 5, + Type = 1 + }); + + base.OnInitialized(); + } +} +```` + +### Use an enum to define the dependency type + +````CSHTML +@* Set the dependency type by using an enum *@ + + + + Add + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public enum DependencyTypes + { + FinishFinish, + FinishStart, + StartStart, + StartFinish + }; + + public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + + 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; } + } + + class DependencyModel + { + public int Id { get; set; } + public int PredecessorId { get; set; } + public int SuccessorId { get; set; } + public DependencyTypes Type { get; set; } + } + + public int LastId { get; set; } = 1; + public int LastDependencyId { get; set; } = 1; + List Data { get; set; } + List Dependencies { get; set; } = new List(); + + protected override void OnInitialized() + { + Data = new List(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Employee " + i.ToString(), + Start = new DateTime(2020, 12, 6 + i), + End = new DateTime(2020, 12, 11 + i), + PercentComplete = i * 0.125 + }; + + 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, 6 + i + j), + End = new DateTime(2020, 12, 7 + i + j), + PercentComplete = j * 0.225 + }); + + LastId++; + } + } + + Dependencies.Add(new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = 3, + SuccessorId = 4, + Type = DependencyTypes.FinishFinish + }); + + Dependencies.Add(new DependencyModel() + { + Id = LastDependencyId++, + PredecessorId = 2, + SuccessorId = 5, + Type = DependencyTypes.StartFinish + }); + + base.OnInitialized(); + } +} +```` +