diff --git a/components/daterangepicker/overview.md b/components/daterangepicker/overview.md
index d4322839f1..e4dbcabe5a 100644
--- a/components/daterangepicker/overview.md
+++ b/components/daterangepicker/overview.md
@@ -89,7 +89,7 @@ The Blazor Date Range Picker provides various parameters that allow you to confi
| `Placeholder` |`string` | The `placeholder` attribute of the two `` | The collection of dependencies. |
+| `Data` | `IEnumerable` | The collection of dependencies. |
| `IdField` | `string` | Unique identifier for each task. Use it for editing and hierarchy. |
| `PredecessorField` | `string` | Points to the predecessor task. |
| `SuccessorField` | `string` | Points to the successor task. |
+| `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`. |
>note To use the Data Binding for the Gantt Dependencies you must provide all data binding features listed above.
@@ -30,18 +32,15 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
````CSHTML
@* Bind a collection to the Data parameter of GanttDependencies. *@
-
-
- Add
-
+ FilterMenuType="@FilterMenuType.Menu"
+ OnEdit="@( (GanttEditEventArgs args) => args.IsCancelled = true )">
+ IdField="@nameof(GanttDependencyModel.Id)"
+ PredecessorIdField="@nameof(GanttDependencyModel.PredecessorId)"
+ SuccessorIdField="@nameof(GanttDependencyModel.SuccessorId)"
+ TypeField="@nameof(GanttDependencyModel.Type)">
-
-
-
+
-
+
-
+
-
-
-@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; }
- }
+@code {
+ private List GanttData { get; set; } = new();
+ private List Dependencies { get; set; } = new();
- 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; }
+ public int LastDependencyId { get; set; }
- public int LastId { get; set; } = 1;
- public int LastDependencyId { get; set; } = 1;
- List Data { get; set; }
- List Dependencies { get; set; } = new List();
+ private int NextYear { get; set; } = DateTime.Today.AddYears(1).Year;
protected override void OnInitialized()
{
- Data = new List();
+ GanttData = new List();
- for (int i = 1; i < 6; i++)
+ for (int i = 1; i <= 3; i++)
{
- var newItem = new FlatModel()
+ GanttData.Add(new GanttFlatModel()
{
- Id = LastId,
- Title = "Employee " + i.ToString(),
- Start = new DateTime(2020, 12, 6 + i),
- End = new DateTime(2020, 12, 11 + i),
+ Id = ++LastId,
+ Title = $"Task {i}",
+ Start = new DateTime(NextYear, 1, 6 + i),
+ End = new DateTime(NextYear, 1, 11 + i),
PercentComplete = i * 0.125
- };
+ });
- Data.Add(newItem);
var parentId = LastId;
- LastId++;
- for (int j = 0; j < 5; j++)
+ for (int j = 1; j <= 3; j++)
{
- Data.Add(new FlatModel()
+ GanttData.Add(new GanttFlatModel()
{
- Id = LastId,
+ 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),
+ Title = $"Task {i} : {j}",
+ Start = new DateTime(NextYear, 1, 6 + i + j),
+ End = new DateTime(NextYear, 1, 7 + i + j),
PercentComplete = j * 0.225
});
- LastId++;
+ if (i == 1 && j > 1)
+ {
+ Dependencies.Add(new GanttDependencyModel()
+ {
+ Id = ++LastDependencyId,
+ PredecessorId = LastId - 1,
+ SuccessorId = LastId,
+ Type = GanttDependencyType.FinishStart
+ });
+ }
+
+ if (i == 2 && j > 1)
+ {
+ Dependencies.Add(new GanttDependencyModel()
+ {
+ Id = ++LastDependencyId,
+ PredecessorId = LastId - 1,
+ SuccessorId = LastId,
+ Type = GanttDependencyType.FinishFinish
+ });
+ }
+
+ if (i == 3 && j > 1)
+ {
+ Dependencies.Add(new GanttDependencyModel()
+ {
+ Id = ++LastDependencyId,
+ PredecessorId = LastId - 1,
+ SuccessorId = LastId,
+ Type = GanttDependencyType.StartStart
+ });
+ }
}
}
- Dependencies.Add(new DependencyModel()
- {
- Id = LastDependencyId++,
- PredecessorId = 3,
- SuccessorId = 4,
- Type = DependencyTypes.FinishFinish
- });
+ base.OnInitialized();
+ }
- Dependencies.Add(new DependencyModel()
- {
- Id = LastDependencyId++,
- PredecessorId = 2,
- SuccessorId = 5,
- Type = DependencyTypes.StartFinish
- });
+ class GanttFlatModel
+ {
+ public int Id { get; set; }
+ public int? ParentId { get; set; }
+ public string Title { get; set; } = string.Empty;
+ public double PercentComplete { get; set; }
+ public DateTime Start { get; set; }
+ public DateTime End { get; set; }
+ }
- base.OnInitialized();
+ class GanttDependencyModel
+ {
+ public int Id { get; set; }
+ public int PredecessorId { get; set; }
+ public int SuccessorId { get; set; }
+ public GanttDependencyType Type { get; set; }
}
}
````
+## Next Steps
+
+* [Explore Gantt dependency editing]({%slug gantt-dependencies-editing%})
diff --git a/components/gantt/dependencies/editing.md b/components/gantt/dependencies/editing.md
index 0077798060..1e8aad8d6e 100644
--- a/components/gantt/dependencies/editing.md
+++ b/components/gantt/dependencies/editing.md
@@ -12,40 +12,29 @@ position: 15
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 Gantt dependencies. After that, you will find a code example.
-List of the available events:
+The Gantt provides the following dependency 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.
+* `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
-
+ FilterMenuType="@FilterMenuType.Menu"
+ OnEdit="@( (GanttEditEventArgs args) => args.IsCancelled = true )">
-
-
-
+
-
+
-
+
-
-
@code {
+ private List GanttData { get; set; } = new();
+ private List Dependencies { get; set; } = new();
+
+ public int LastId { get; set; }
+ public int LastDependencyId { get; set; }
+
+ private int NextYear { get; set; } = DateTime.Today.AddYears(1).Year;
private void CreateDependency(GanttDependencyCreateEventArgs args)
{
- var dependency = new DependencyModel()
+ var dependency = new GanttDependencyModel()
{
Id = LastDependencyId++,
PredecessorId = (int)args.PredecessorId,
@@ -104,86 +100,93 @@ List of the available events:
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; }
+ var deletedDependency = (GanttDependencyModel)args.Item;
+ Dependencies.RemoveAll(d => d.Id == deletedDependency.Id);
}
- 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();
+ GanttData = new List();
- for (int i = 1; i < 6; i++)
+ for (int i = 1; i <= 3; i++)
{
- var newItem = new FlatModel()
+ GanttData.Add(new GanttFlatModel()
{
- Id = LastId,
- Title = "Employee " + i.ToString(),
- Start = new DateTime(2020, 12, 6 + i),
- End = new DateTime(2020, 12, 11 + i),
+ Id = ++LastId,
+ Title = $"Task {i}",
+ Start = new DateTime(NextYear, 1, 6 + i),
+ End = new DateTime(NextYear, 1, 11 + i),
PercentComplete = i * 0.125
- };
+ });
- Data.Add(newItem);
var parentId = LastId;
- LastId++;
- for (int j = 0; j < 5; j++)
+ for (int j = 1; j <= 3; j++)
{
- Data.Add(new FlatModel()
+ GanttData.Add(new GanttFlatModel()
{
- Id = LastId,
+ 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),
+ Title = $"Task {i} : {j}",
+ Start = new DateTime(NextYear, 1, 6 + i + j),
+ End = new DateTime(NextYear, 1, 7 + i + j),
PercentComplete = j * 0.225
});
- LastId++;
+ if (i == 1 && j > 1)
+ {
+ Dependencies.Add(new GanttDependencyModel()
+ {
+ Id = ++LastDependencyId,
+ PredecessorId = LastId - 1,
+ SuccessorId = LastId,
+ Type = GanttDependencyType.FinishStart
+ });
+ }
+
+ if (i == 2 && j > 1)
+ {
+ Dependencies.Add(new GanttDependencyModel()
+ {
+ Id = ++LastDependencyId,
+ PredecessorId = LastId - 1,
+ SuccessorId = LastId,
+ Type = GanttDependencyType.FinishFinish
+ });
+ }
+
+ if (i == 3 && j > 1)
+ {
+ Dependencies.Add(new GanttDependencyModel()
+ {
+ Id = ++LastDependencyId,
+ PredecessorId = LastId - 1,
+ SuccessorId = LastId,
+ Type = GanttDependencyType.StartStart
+ });
+ }
}
}
- Dependencies.Add(new DependencyModel()
- {
- Id = LastDependencyId++,
- PredecessorId = 3,
- SuccessorId = 4,
- Type = 0
- });
+ base.OnInitialized();
+ }
- Dependencies.Add(new DependencyModel()
- {
- Id = LastDependencyId++,
- PredecessorId = 2,
- SuccessorId = 5,
- Type = 2
- });
+ class GanttFlatModel
+ {
+ public int Id { get; set; }
+ public int? ParentId { get; set; }
+ public string Title { get; set; } = string.Empty;
+ public double PercentComplete { get; set; }
+ public DateTime Start { get; set; }
+ public DateTime End { get; set; }
+ }
- base.OnInitialized();
+ class GanttDependencyModel
+ {
+ public int Id { get; set; }
+ public int PredecessorId { get; set; }
+ public int SuccessorId { get; set; }
+ public GanttDependencyType Type { get; set; }
}
}
````
diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md
index b1589a5938..d02f70431c 100644
--- a/components/gantt/dependencies/overview.md
+++ b/components/gantt/dependencies/overview.md
@@ -10,19 +10,16 @@ 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.
+The Telerik Gantt for Blazor lets 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 of different dependency types]({%slug gantt-dependencies-databind%}) and allow your users to [edit]({%slug gantt-dependencies-editing%}) the dependencies.
+## Basics
-#### To define dependencies in your Gantt Chart
+To define dependencies in your Gantt Chart:
-* Add the `GanttDependenciesSettings` tag, child tag of the ``
+* Add the `GanttDependenciesSettings` tag, child tag of the ``.
* Inside the `GanttDependenciesSettings` add the `` and provide a data collection to the `Data` parameter.
+## Gantt Dependency Features
-## Gantt Dependencies Features:
-
-@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-
-* `Data Binding` - Allows you to provide a collection of dependencies to the Gantt Chart for Blazor. For more information read the [Data Binding]({%slug gantt-dependencies-databind%}) article.
-* `TypeField` - Defines the dependency type. For more information read the [Types]({%slug gantt-dependencies-types%}) article.
-* `Editing` - Allow the user to edit the dependencies. For more information read the [Editing]({%slug gantt-dependencies-editing%}) article.
+* [Dependency Data Binding]({%slug gantt-dependencies-databind%}) allows you to provide a collection of dependencies to the Gantt Chart for Blazor.
+* [Dependency Editing]({%slug gantt-dependencies-editing%}) allows the user to edit the dependencies.
diff --git a/components/gantt/dependencies/types.md b/components/gantt/dependencies/types.md
deleted file mode 100644
index 00e90fc924..0000000000
--- a/components/gantt/dependencies/types.md
+++ /dev/null
@@ -1,313 +0,0 @@
----
-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();
- }
-}
-````
-
diff --git a/components/gantt/gantt-tree/editing/popup.md b/components/gantt/gantt-tree/editing/popup.md
index b9e0390b53..56d491894c 100644
--- a/components/gantt/gantt-tree/editing/popup.md
+++ b/components/gantt/gantt-tree/editing/popup.md
@@ -49,7 +49,7 @@ The `GanttDependencyDescriptor` exposes four fields that describe the mutated de
|----------|----------|----------|
| `PredecessorId` | `object` | The Id of the predecessor of the mutated dependency. |
| `SuccessorId` | `object` | The Id of the successor of the mutated dependency. |
-| `Type` | `int` | The [Type]({%slug gantt-dependencies-types%}) of the dependency. |
+| `Type` | `GanttDependencyType` enum | The [type of the dependency]({%slug gantt-dependencies-databind%}). |
| `DataItem` | `object` | The model associated with this dependency. |
>caption The Command buttons and the Gantt events let you handle data operations in Popup edit mode.
diff --git a/components/textarea/overview.md b/components/textarea/overview.md
index 1f0ce6b66f..321b683ea5 100644
--- a/components/textarea/overview.md
+++ b/components/textarea/overview.md
@@ -55,8 +55,7 @@ The Blazor TextArea provides various parameters to configure the component:
| ----------- | ----------- | ----------- |
| `AutoCapitalize` | `string` | A `string` that maps to the [`autocapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) attribute of the HTML element. It's applicable only for touch devices and virtual keyboards. |
| `AutoComplete` | `bool` | Maps to the autocomplete attribute of the HTML `