From 8410a8abfb698b96b44cab26f73505a65c7e793c Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 9 Sep 2021 14:53:04 +0300 Subject: [PATCH 1/7] feat(dependencies): inital commit --- components/gantt/dependencies/overview.md | 24 +++++++++++++++++++++++ components/gantt/dependencies/types.md | 24 +++++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 components/gantt/dependencies/overview.md create mode 100644 components/gantt/dependencies/types.md diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md new file mode 100644 index 0000000000..fa1020d574 --- /dev/null +++ b/components/gantt/dependencies/overview.md @@ -0,0 +1,24 @@ +--- +title: Overview +page_title: Gantt Chart - Tree +description: Overview of the Tree for the Gantt Chart for Blazor. +slug: gantt-tree +tags: telerik,blazor,gantt,chart,tree +published: True +position: 0 +--- + +# Gantt Tree + +The Gantt Tree is the left part of the [Gantt Chart]({%slug gantt-overview%}). You can provide data to the component through its [data binding]({%slug gantt-data-binding-overview%}) options. You can also use the [filtering]({%slug gantt-filtering-overview%}), [sorting]({%slug gantt-sorting%}), and [editing]({%slug gantt-tree-editing%}) capabilities of the Telerik Gantt for Blazor. + +## List of available features for the Gantt Tree + +* `Gantt Columns` - The main building blocks of the Gantt Tree. They are used to render data in the component. You can read more information in the [Bound Column]({%slug gantt-columns-bound%}) article. + +* `Editing` - Allows you to create new records, update the existing or deleting them. You can read more on this topic in the [Editing]({%slug gantt-tree-editing%}) article. + +* `Filtering` - the Gantt can filter data automatically. You can read more about this feature in the [Filtering]({%slug gantt-filtering-overview%}) article. + +* `Sorting` - Allows you to sort the data in ascending and descending order. You can read more about this feature in the [Sorting]({%slug gantt-sorting%}) article. + diff --git a/components/gantt/dependencies/types.md b/components/gantt/dependencies/types.md new file mode 100644 index 0000000000..fa1020d574 --- /dev/null +++ b/components/gantt/dependencies/types.md @@ -0,0 +1,24 @@ +--- +title: Overview +page_title: Gantt Chart - Tree +description: Overview of the Tree for the Gantt Chart for Blazor. +slug: gantt-tree +tags: telerik,blazor,gantt,chart,tree +published: True +position: 0 +--- + +# Gantt Tree + +The Gantt Tree is the left part of the [Gantt Chart]({%slug gantt-overview%}). You can provide data to the component through its [data binding]({%slug gantt-data-binding-overview%}) options. You can also use the [filtering]({%slug gantt-filtering-overview%}), [sorting]({%slug gantt-sorting%}), and [editing]({%slug gantt-tree-editing%}) capabilities of the Telerik Gantt for Blazor. + +## List of available features for the Gantt Tree + +* `Gantt Columns` - The main building blocks of the Gantt Tree. They are used to render data in the component. You can read more information in the [Bound Column]({%slug gantt-columns-bound%}) article. + +* `Editing` - Allows you to create new records, update the existing or deleting them. You can read more on this topic in the [Editing]({%slug gantt-tree-editing%}) article. + +* `Filtering` - the Gantt can filter data automatically. You can read more about this feature in the [Filtering]({%slug gantt-filtering-overview%}) article. + +* `Sorting` - Allows you to sort the data in ascending and descending order. You can read more about this feature in the [Sorting]({%slug gantt-sorting%}) article. + From 22347277d0fa675591e3cf0b145d47d0ef5cb95f Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 13 Sep 2021 13:07:05 +0300 Subject: [PATCH 2/7] chore(dependencies): improvements --- components/gantt/dependencies/overview.md | 31 ++- components/gantt/dependencies/types.md | 313 +++++++++++++++++++++- 2 files changed, 321 insertions(+), 23 deletions(-) diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md index fa1020d574..1be6b35e00 100644 --- a/components/gantt/dependencies/overview.md +++ b/components/gantt/dependencies/overview.md @@ -1,24 +1,33 @@ --- title: Overview -page_title: Gantt Chart - Tree -description: Overview of the Tree for the Gantt Chart for Blazor. -slug: gantt-tree -tags: telerik,blazor,gantt,chart,tree +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 Tree +# Gantt Dependencies -The Gantt Tree is the left part of the [Gantt Chart]({%slug gantt-overview%}). You can provide data to the component through its [data binding]({%slug gantt-data-binding-overview%}) options. You can also use the [filtering]({%slug gantt-filtering-overview%}), [sorting]({%slug gantt-sorting%}), and [editing]({%slug gantt-tree-editing%}) capabilities of the Telerik Gantt for Blazor. +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 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. -## List of available features for the Gantt Tree -* `Gantt Columns` - The main building blocks of the Gantt Tree. They are used to render data in the component. You can read more information in the [Bound Column]({%slug gantt-columns-bound%}) article. +#### To define dependencies in your Gantt Chart -* `Editing` - Allows you to create new records, update the existing or deleting them. You can read more on this topic in the [Editing]({%slug gantt-tree-editing%}) article. +* Add the `GanttDependenciesSettings` tag, child tag of the `` +* inside the `GanttDependenciesSettings` add the `` and provide a data collection to the `Data` parameter. -* `Filtering` - the Gantt can filter data automatically. You can read more about this feature in the [Filtering]({%slug gantt-filtering-overview%}) article. -* `Sorting` - Allows you to sort the data in ascending and descending order. You can read more about this feature in the [Sorting]({%slug gantt-sorting%}) article. +## Gantt Dependencies Features: + +* `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. + +* `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 index fa1020d574..d6a210a74f 100644 --- a/components/gantt/dependencies/types.md +++ b/components/gantt/dependencies/types.md @@ -1,24 +1,313 @@ --- -title: Overview -page_title: Gantt Chart - Tree -description: Overview of the Tree for the Gantt Chart for Blazor. -slug: gantt-tree -tags: telerik,blazor,gantt,chart,tree +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: 0 --- -# Gantt Tree +# Types -The Gantt Tree is the left part of the [Gantt Chart]({%slug gantt-overview%}). You can provide data to the component through its [data binding]({%slug gantt-data-binding-overview%}) options. You can also use the [filtering]({%slug gantt-filtering-overview%}), [sorting]({%slug gantt-sorting%}), and [editing]({%slug gantt-tree-editing%}) capabilities of the Telerik Gantt for Blazor. +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: -## List of available features for the Gantt Tree +* `FinishFinish` - `0` - A line from the end date of the predecessor to the end date of the successor. -* `Gantt Columns` - The main building blocks of the Gantt Tree. They are used to render data in the component. You can read more information in the [Bound Column]({%slug gantt-columns-bound%}) article. +* `FinishStart` - `1` - A line from the end date of the predecessor to the start date of the successor. -* `Editing` - Allows you to create new records, update the existing or deleting them. You can read more on this topic in the [Editing]({%slug gantt-tree-editing%}) article. +* `StartStart` - `2` - A line from the start date of the predecessor to the start date of the successor. -* `Filtering` - the Gantt can filter data automatically. You can read more about this feature in the [Filtering]({%slug gantt-filtering-overview%}) article. +* `StartFinish` - `3` - A line from the start date of the predecessor to the end date of the successor. -* `Sorting` - Allows you to sort the data in ascending and descending order. You can read more about this feature in the [Sorting]({%slug gantt-sorting%}) article. +## 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(); + } +} +```` From 199445e01be134055b30d570eab14dcc1f581489 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 13 Sep 2021 16:31:54 +0300 Subject: [PATCH 3/7] chore(dep): final commit --- components/gantt/dependencies/databind.md | 172 ++++++++++++ components/gantt/dependencies/editing.md | 321 ++++++++++++++++++++++ components/gantt/dependencies/overview.md | 6 +- components/gantt/dependencies/types.md | 2 +- 4 files changed, 495 insertions(+), 6 deletions(-) create mode 100644 components/gantt/dependencies/databind.md create mode 100644 components/gantt/dependencies/editing.md 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..0231eb3f36 --- /dev/null +++ b/components/gantt/dependencies/editing.md @@ -0,0 +1,321 @@ +--- +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 +--- + +# Editing + +The Gantt Chart component lets you edit dependencies. This article will explain how to enable and use it. + +* [OnCreate](#oncreate) + +* [OnDelete](#ondelete) + +## OnCreate + +The `OnCreate` event fires when the users drag the dependency line from one end-point to another and thus create a new dependency. It provides a `GanttDependencyCreateEventArgs` object that contains the currently created dependency. + +### Use the OnCreate event to react to the user creating a new dependency + +````CSHTML +@* Drag the line of a dependecy to a new end-point to fire the 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); + } + + 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(); + } +} +```` + +## OnDelete + +The `OnDelete` event 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. You can cast that object to your model. + +### Use the OnDelete event to react to the user deleting a dependency + +````CSHTML +@* Delete a dependency to fire the event *@ + + + + Add + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + + private void DeleteDependency(GanttDependencyDeleteEventArgs args) + { + Dependencies.RemoveAll(d => d.Id.Equals((args.Item as DependencyModel).Id)); + } + + 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(); + } +} +```` \ No newline at end of file diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md index 1be6b35e00..11ab9d2215 100644 --- a/components/gantt/dependencies/overview.md +++ b/components/gantt/dependencies/overview.md @@ -21,11 +21,7 @@ The Telerik Gantt for Blazor allows you define dependencies, which are rendered ## Gantt Dependencies Features: -* `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. +* 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. diff --git a/components/gantt/dependencies/types.md b/components/gantt/dependencies/types.md index d6a210a74f..c87daff8a3 100644 --- a/components/gantt/dependencies/types.md +++ b/components/gantt/dependencies/types.md @@ -5,7 +5,7 @@ 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: 0 +position: 10 --- # Types From ff7cf2525016d10b96b3874dc1cb931c3649307e Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 13 Sep 2021 16:33:24 +0300 Subject: [PATCH 4/7] chore(config): update the config file --- _config.yml | 3 +++ 1 file changed, 3 insertions(+) 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 From fa963769e4ba77dec4c4d5244ea595cacda9dc33 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 14 Sep 2021 13:16:41 +0300 Subject: [PATCH 5/7] docs(gantt):minor fix --- components/gantt/dependencies/editing.md | 2 +- components/gantt/dependencies/overview.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/gantt/dependencies/editing.md b/components/gantt/dependencies/editing.md index 0231eb3f36..88d01fd2cc 100644 --- a/components/gantt/dependencies/editing.md +++ b/components/gantt/dependencies/editing.md @@ -8,7 +8,7 @@ published: True position: 15 --- -# Editing +# Dependencies Editing The Gantt Chart component lets you edit dependencies. This article will explain how to enable and use it. diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md index 11ab9d2215..37a4b7f764 100644 --- a/components/gantt/dependencies/overview.md +++ b/components/gantt/dependencies/overview.md @@ -10,13 +10,13 @@ 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 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. +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. +* Inside the `GanttDependenciesSettings` add the `` and provide a data collection to the `Data` parameter. ## Gantt Dependencies Features: From 961d1eb1a9762079600a61de762a668fd26fb99e Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 14 Sep 2021 14:08:19 +0300 Subject: [PATCH 6/7] docs(gantt):refactored dependencies editing article --- components/gantt/dependencies/editing.md | 178 +++-------------------- 1 file changed, 23 insertions(+), 155 deletions(-) diff --git a/components/gantt/dependencies/editing.md b/components/gantt/dependencies/editing.md index 88d01fd2cc..2efc291c14 100644 --- a/components/gantt/dependencies/editing.md +++ b/components/gantt/dependencies/editing.md @@ -10,20 +10,29 @@ position: 15 # Dependencies Editing -The Gantt Chart component lets you edit dependencies. This article will explain how to enable and use it. +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. -* [OnCreate](#oncreate) +Sections in this article: -* [OnDelete](#ondelete) +* [Basics](#basics) -## OnCreate +* [Example](#example) -The `OnCreate` event fires when the users drag the dependency line from one end-point to another and thus create a new dependency. It provides a `GanttDependencyCreateEventArgs` object that contains the currently created dependency. +## Basics -### Use the OnCreate event to react to the user creating a new dependency +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 line of a dependecy to a new end-point to fire the event *@ +@* Drag the line of a task to a new end-point to fire the Oncreate event. Delete a dependency to fire the OnDelete event *@ + OnCreate="@CreateDependency" + OnDelete="@DeleteDependency"> @@ -77,7 +87,8 @@ The `OnCreate` event fires when the users drag the dependency line from one end- -@code { +@code { + private void CreateDependency(GanttDependencyCreateEventArgs args) { var dependency = new DependencyModel() @@ -91,156 +102,13 @@ The `OnCreate` event fires when the users drag the dependency line from one end- Dependencies.Add(dependency); } - 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(); - } -} -```` - -## OnDelete - -The `OnDelete` event 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. You can cast that object to your model. - -### Use the OnDelete event to react to the user deleting a dependency - -````CSHTML -@* Delete a dependency to fire the event *@ - - - - Add - - - - - - - - - - - - - - - - - - - - - - - - - - - - -@code { - public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); - 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; } @@ -318,4 +186,4 @@ The `OnDelete` event fires when the users deletes a dependency. To delete a depe base.OnInitialized(); } } -```` \ No newline at end of file +```` From 49ff2b98ca02aba10651164f7986176dd46c62af Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 14 Sep 2021 14:11:38 +0300 Subject: [PATCH 7/7] docs(gantt):fix: --- components/gantt/dependencies/editing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gantt/dependencies/editing.md b/components/gantt/dependencies/editing.md index 2efc291c14..5c9ddd3af2 100644 --- a/components/gantt/dependencies/editing.md +++ b/components/gantt/dependencies/editing.md @@ -32,7 +32,7 @@ List of the available events: ## Example ````CSHTML -@* Drag the line of a task to a new end-point to fire the Oncreate event. Delete a dependency to fire the OnDelete event *@ +@* 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 *@