From 2b5db9b6ff2a8999b35493fd3d750eac8f0b4e0e Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 21 Oct 2024 18:39:38 +0300
Subject: [PATCH 01/16] docs(common): Document breaking changes in version 7

---
 components/daterangepicker/overview.md        |  2 +-
 components/textarea/overview.md               |  3 +-
 knowledge-base/radiogroup-like-buttongroup.md |  2 +-
 .../textarea-autosize-max-height.md           |  3 +-
 upgrade/breaking-changes/2-0-0.md             |  2 +-
 upgrade/breaking-changes/2-2-0.md             |  2 +-
 upgrade/breaking-changes/3-0-0.md             |  2 +-
 upgrade/breaking-changes/4-0-0.md             |  2 +-
 upgrade/breaking-changes/5-0-0.md             |  2 +-
 upgrade/breaking-changes/6-0-0.md             | 24 +++++++++
 upgrade/breaking-changes/7-0-0.md             | 54 +++++++++++++++++++
 upgrade/breaking-changes/list.md              |  2 +
 upgrade/rendering-changes/3-4-0.md            |  2 +-
 upgrade/rendering-changes/3-6-0.md            |  2 +-
 upgrade/rendering-changes/4-3-0.md            |  2 +-
 upgrade/rendering-changes/4-6-0.md            |  2 +-
 upgrade/rendering-changes/6-0-0.md            |  2 +-
 upgrade/rendering-changes/7-0-0.md            |  7 ++-
 upgrade/rendering-changes/list.md             | 14 ++---
 19 files changed, 108 insertions(+), 23 deletions(-)
 create mode 100644 upgrade/breaking-changes/6-0-0.md
 create mode 100644 upgrade/breaking-changes/7-0-0.md

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 `<input />` elements. The `Placeholder` will appear if the component is bound to **nullable** DateTime objects - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime objects. The Placeholder value will be displayed when the input is not focused. Once the user focuses it to start typing, the Format Placeholder (default or [customized one](#format-placeholder)) will override the Placeholder to indicate the format the date should be entered in. |
 | `ShowClearButton` | `bool` | Defines if the user can clear the component value through an **x** button rendered inside the input. |
 | `ShowWeekNumbers` | `bool` | Sets if the popup Calendars will display week numbers according to the [ISO-8601 format](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.isoweek.getweekofyear). Note that the [ISO week number may differ from the conventional .NET week number](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.calendar.getweekofyear). |
-| `ShowOtherMonthDays` | `bool` <br /> (`true`)| Defines whether the leading and trailing days from other months in the Calendar popup are visible in the current month view. |
+| `ShowOtherMonthDays` | `bool` | Defines whether the leading and trailing days from other months in the Calendar popup are visible in the current month view. |
 | `StartValue` and `EndValue` | `T` | The current values of the inputs for start and end of the range. Can be used for two-way binding. |
 | `TabIndex` | `int?` | The `tabindex` attribute of both `input` HTML elements in the component. They both will have the same `tabindex`. Use it to customize the tabbing (focus) order of the inputs on your page. |
 | `Title` | `string` | The title text rendered in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `Auto`]({%slug adaptive-rendering%}). |
diff --git a/components/textarea/overview.md b/components/textarea/overview.md
index 1f0ce6b66f..ced339b308 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 `<textarea>`. |
-| `AutoSize` <br /> (deprecated) | `bool` | Specifies if the TextArea will adjust its height based on the user input. You can [use CSS to limit the resizing up to a max height]({%slug textarea-kb-autosize-max-height%}). This parameter is deprecated. Use `ResizeMode` with `Auto` value instead. |
-| `ResizeMode` | `TextAreaResizeMode?` | Specifies the TextArea's resize behavior. Default behavior is the one set by the browser. |
+| `ResizeMode` | `TextAreaResizeMode?` | Specifies the TextArea's resize behavior. Default behavior is the one set by the browser. You can also [use CSS to limit the resizing up to a max height]({%slug textarea-kb-autosize-max-height%}). |
 | `Class` | `string` | The custom CSS class to be rendered on the `<span class="k-textarea">` element. |
 | `Cols` | `int?` | Maps to the `cols` attribute of the HTML `<textarea>` element. Do not use together with `Width`.
 | `DebounceDelay` | `int` | Specifies the time in milliseconds between the last typed symbol and the updating of the value. The default value is 150ms. |
diff --git a/knowledge-base/radiogroup-like-buttongroup.md b/knowledge-base/radiogroup-like-buttongroup.md
index fee7a652ce..39cf764268 100644
--- a/knowledge-base/radiogroup-like-buttongroup.md
+++ b/knowledge-base/radiogroup-like-buttongroup.md
@@ -31,7 +31,7 @@ Use custom CSS to make the radio inputs invisible and style their labels to look
 
 The RadioGroup will look similar to a [ButtonGroup with single selection]({%slug buttongroup-selection%}#single-selection). The major difference is that the RadioGroup has a single value of type `<T>`, while each button in the ButtonGroup is bound to a separate `boolean` value for its selected state.
 
->tip The following example is for versions 6.0 and above, which feature an [updated HTML rendering for the RadioGroup]({%slug changes-in-6-0-0%}#radiogroup). If you are using an older version, use the [alternative CSS code from the section below](#solution-up-to-version-511).
+>tip The following example is for versions 6.0 and above, which feature an [updated HTML rendering for the RadioGroup]({%slug rendering-changes-in-6-0-0%}#radiogroup). If you are using an older version, use the [alternative CSS code from the section below](#solution-up-to-version-511).
 
 >caption Style the RadioGroup like a ButtonGroup
 
diff --git a/knowledge-base/textarea-autosize-max-height.md b/knowledge-base/textarea-autosize-max-height.md
index 9aadfa1463..657ad9d976 100644
--- a/knowledge-base/textarea-autosize-max-height.md
+++ b/knowledge-base/textarea-autosize-max-height.md
@@ -41,7 +41,7 @@ This KB article answers the following questions:
 ````CSHTML
 <TelerikTextArea @bind-Value="@TextValue"
                  Width="500px"
-                 AutoSize="true"
+                 ResizeMode="TextAreaResizeMode.Auto"
                  Class="max-height-200" />
 
 <style>
@@ -56,6 +56,7 @@ This KB article answers the following questions:
 }
 ````
 
+> Use `AutoSize="true"` instead of `ResizeMode="TextAreaResizeMode.Auto"` with Telerik UI for Blazor versions `6.x` and older.
 
 ## See Also
 
diff --git a/upgrade/breaking-changes/2-0-0.md b/upgrade/breaking-changes/2-0-0.md
index 94c9eccdcd..25c3d92a95 100644
--- a/upgrade/breaking-changes/2-0-0.md
+++ b/upgrade/breaking-changes/2-0-0.md
@@ -3,7 +3,7 @@ title: 2.0.0
 description: Handle the changes in the 2.0.0 major release of the Telerik UI for Blazor components.
 page_title: Breaking Changes in 2.0.0
 slug: changes-in-2-0-0
-position: 1
+position: 1000
 ---
 
 # Breaking Changes in 2.0.0
diff --git a/upgrade/breaking-changes/2-2-0.md b/upgrade/breaking-changes/2-2-0.md
index ddec3bb1bb..7552428f81 100644
--- a/upgrade/breaking-changes/2-2-0.md
+++ b/upgrade/breaking-changes/2-2-0.md
@@ -3,7 +3,7 @@ title: 2.2.0
 description: Handle the changes in the 2.2.0 release of the Telerik UI for Blazor components.
 page_title: Breaking Changes in 2.2.0
 slug: changes-in-2-2-0
-position: 1
+position: 995
 ---
 
 # Breaking Changes in 2.2.0
diff --git a/upgrade/breaking-changes/3-0-0.md b/upgrade/breaking-changes/3-0-0.md
index 10810126e3..f91f5d12ed 100644
--- a/upgrade/breaking-changes/3-0-0.md
+++ b/upgrade/breaking-changes/3-0-0.md
@@ -3,7 +3,7 @@ title: 3.0.0
 description: Handle the changes in the 3.0.0 release of the Telerik UI for Blazor components.
 page_title: Breaking Changes in 3.0.0
 slug: changes-in-3-0-0
-position: 1
+position: 990
 ---
 
 # Breaking Changes in 3.0.0
diff --git a/upgrade/breaking-changes/4-0-0.md b/upgrade/breaking-changes/4-0-0.md
index dab2c295a7..182ac8579f 100644
--- a/upgrade/breaking-changes/4-0-0.md
+++ b/upgrade/breaking-changes/4-0-0.md
@@ -3,7 +3,7 @@ title: 4.0.0
 description: Handle the changes in the 4.0.0 release of the Telerik UI for Blazor components.
 page_title: Breaking Changes in 4.0.0
 slug: changes-in-4-0-0
-position: 1
+position: 985
 ---
 
 # Breaking Changes in 4.0.0
diff --git a/upgrade/breaking-changes/5-0-0.md b/upgrade/breaking-changes/5-0-0.md
index b525dc75c7..80b1abac2d 100644
--- a/upgrade/breaking-changes/5-0-0.md
+++ b/upgrade/breaking-changes/5-0-0.md
@@ -3,7 +3,7 @@ title: 5.0.0
 description: Handle the changes in the 5.0.0 release of the Telerik UI for Blazor components.
 page_title: Breaking Changes in 5.0.0
 slug: changes-in-5-0-0
-position: 1
+position: 980
 ---
 
 # Breaking Changes in 5.0.0
diff --git a/upgrade/breaking-changes/6-0-0.md b/upgrade/breaking-changes/6-0-0.md
new file mode 100644
index 0000000000..a1a35c6c26
--- /dev/null
+++ b/upgrade/breaking-changes/6-0-0.md
@@ -0,0 +1,24 @@
+---
+title: 6.0.0
+description: Handle the changes in the 6.0.0 release of the Telerik UI for Blazor components.
+page_title: Breaking Changes in 6.0.0
+slug: changes-in-6-0-0
+position: 975
+---
+
+# Breaking Changes in 6.0.0
+
+This article outlines the breaking changes in Telerik UI for Blazor version 6.0.0.
+
+## Themes
+
+The theme color variable names have changed. This is relevant only to Blazor applications that:
+
+* [Use Telerik themes that are built from the source code]({%slug themes-customize%}#building-themes-from-source-code).
+* [Override theme variable values]({%slug themes-customize%}#setting-theme-variables).
+
+See the <a href="https://www.telerik.com/design-system/docs/themes/theme-default/migration/" target="_blank">Design System Migration Article</a>.
+
+## See Also
+
+* [Rendering changes in Telerik UI for Blazor 6.0.0]({%slug rendering-changes-in-6-0-0%})
diff --git a/upgrade/breaking-changes/7-0-0.md b/upgrade/breaking-changes/7-0-0.md
new file mode 100644
index 0000000000..0e968455ca
--- /dev/null
+++ b/upgrade/breaking-changes/7-0-0.md
@@ -0,0 +1,54 @@
+---
+title: 7.0.0
+description: Handle the changes in the 7.0.0 release of the Telerik UI for Blazor components.
+page_title: Breaking Changes in 7.0.0
+slug: changes-in-7-0-0
+position: 970
+---
+
+# Breaking Changes in 7.0.0
+
+This article outlines the breaking changes in Telerik UI for Blazor version 7.0.0.
+
+## Common
+
+### AutoComplete, ComboBox, MultiColumnComboBox, MultiSelect
+
+The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
+
+## DateRangePicker
+
+* The [`ShowOtherMonthDays` parameter's default value]({%slug daterangepicker-overview%}#daterangepicker-parameters) is changed to `false`.
+
+## DropDownButton
+
+* The [`ShowArrowButton` parameter's default value]({%slug dropdownbutton-overview%}#dropdownbutton-parameters) is changed to `false`.
+
+## FileSelect
+
+* The obsolete method `OpenFileSelectAsync()` is removed. [Use `OpenSelectFilesDialog()`]({%slug fileselect-overview%}#fileselect-reference-and-methods) instead.
+
+## Gantt
+
+
+## Grid
+
+* Columns with `Visible="false"` are editable by default in popup edit mode. To avoid this, [set `Editable="false"` together with `Visible="false"`]({%slug components/grid/editing/popup%}).
+* The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug components/grid/columns/resize%}#autofit-columns) instead.
+* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumsAsync()` instead.
+* The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
+
+## TextArea
+
+* The obsolete parameter `AutoSize` is removed. Use [`ResizeMode="TextAreaResizeMode.Auto"`]({%slug textarea-overview%}#textarea-parameters) instead of `AutoSize="true"`.
+
+## TreeList
+
+* Columns with `Visible="false"` are editable by default in popup edit mode. To avoid this, [set `Editable="false"` together with `Visible="false"`]({%slug treelist-editing-popup%}).
+* The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug treelist-columns-resize%}#autofit-columns) instead.
+* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumsAsync()` instead.
+* The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
+
+## Upload
+
+* The obsolete method `OpenFileSelectAsync()` is removed. [Use `OpenSelectFilesDialog()`]({%slug upload-overview%}#upload-reference-and-methods) instead.
diff --git a/upgrade/breaking-changes/list.md b/upgrade/breaking-changes/list.md
index 98a09853b4..c5b16f38dc 100644
--- a/upgrade/breaking-changes/list.md
+++ b/upgrade/breaking-changes/list.md
@@ -11,6 +11,8 @@ position: 0
 This article lists the releases of the Telerik UI for Blazor product that introduce breaking changes. You may want to go through it when [upgrading]({%slug upgrade-tutorial%}) to see whether you are affected.
 
 
+* [7.0.0]({%slug changes-in-7-0-0%})
+* [6.0.0]({%slug changes-in-6-0-0%})
 * [5.0.0]({%slug changes-in-5-0-0%})
 * [4.0.0]({%slug changes-in-4-0-0%})
 * [3.0.0]({%slug changes-in-3-0-0%})
diff --git a/upgrade/rendering-changes/3-4-0.md b/upgrade/rendering-changes/3-4-0.md
index 1758b74061..8970dfa434 100644
--- a/upgrade/rendering-changes/3-4-0.md
+++ b/upgrade/rendering-changes/3-4-0.md
@@ -2,7 +2,7 @@
 title: 3.4.0
 description: Handle the rendering changes in the 3.4.0 release of the Telerik UI for Blazor components.
 page_title: Rendering Changes in the 3.4.0 Release 
-slug: changes-in-3-4-0
+slug: rendering-changes-in-3-4-0
 position: 1000
 ---
 
diff --git a/upgrade/rendering-changes/3-6-0.md b/upgrade/rendering-changes/3-6-0.md
index fda1229095..0b3d656e68 100644
--- a/upgrade/rendering-changes/3-6-0.md
+++ b/upgrade/rendering-changes/3-6-0.md
@@ -2,7 +2,7 @@
 title: 3.6.0
 description: Handle the rendering changes in the 3.6.0 release of the Telerik UI for Blazor components.
 page_title: Rendering Changes in the 3.6.0 Release 
-slug: changes-in-3-6-0
+slug: rendering-changes-in-3-6-0
 position: 995
 ---
 
diff --git a/upgrade/rendering-changes/4-3-0.md b/upgrade/rendering-changes/4-3-0.md
index 653aa910a8..81b106f672 100644
--- a/upgrade/rendering-changes/4-3-0.md
+++ b/upgrade/rendering-changes/4-3-0.md
@@ -2,7 +2,7 @@
 title: 4.3.0
 description: Handle the rendering changes in the 4.3.0 release of the Telerik UI for Blazor components.
 page_title: Rendering Changes in the 4.3.0 Release
-slug: changes-in-4-3-0
+slug: rendering-changes-in-4-3-0
 position: 985
 ---
 
diff --git a/upgrade/rendering-changes/4-6-0.md b/upgrade/rendering-changes/4-6-0.md
index 8ffaab16cf..b3ece97bf3 100644
--- a/upgrade/rendering-changes/4-6-0.md
+++ b/upgrade/rendering-changes/4-6-0.md
@@ -2,7 +2,7 @@
 title: 4.6.0
 description: Handle the rendering changes in the 4.6.0 release of the Telerik UI for Blazor components.
 page_title: Rendering Changes in the 4.6.0 Release
-slug: changes-in-4-6-0
+slug: rendering-changes-in-4-6-0
 position: 980
 ---
 
diff --git a/upgrade/rendering-changes/6-0-0.md b/upgrade/rendering-changes/6-0-0.md
index 2bc226ef2b..f6bfe81f5c 100644
--- a/upgrade/rendering-changes/6-0-0.md
+++ b/upgrade/rendering-changes/6-0-0.md
@@ -2,7 +2,7 @@
 title: 6.0.0
 description: Handle the rendering changes in the 6.0.0 release of the Telerik UI for Blazor components.
 page_title: Rendering Changes in the 6.0.0 Release
-slug: changes-in-6-0-0
+slug: rendering-changes-in-6-0-0
 position: 975
 ---
 
diff --git a/upgrade/rendering-changes/7-0-0.md b/upgrade/rendering-changes/7-0-0.md
index 984c895a2b..efe7aea143 100644
--- a/upgrade/rendering-changes/7-0-0.md
+++ b/upgrade/rendering-changes/7-0-0.md
@@ -2,7 +2,7 @@
 title: 7.0.0
 description: Handle the rendering changes in the 7.0.0 release of the Telerik UI for Blazor components.
 page_title: Rendering Changes in the 7.0.0 Release
-slug: changes-in-7-0-0
+slug: rendering-changes-in-7-0-0
 position: 970
 ---
 
@@ -11,6 +11,7 @@ position: 970
 * [AIPrompt](#aiprompt)
 * [Gantt](#gantt)
 * [Menu](#menu)
+* [PanelBar](#panelbar)
 * [PDFViewer](#pdfviewer)
 * [Signature](#signature)
 * [TabStrip](#tabstrip)
@@ -36,6 +37,10 @@ position: 970
 1. The menu item elements (`<span class="k-link">`) no longer include the `k-in` class.
 2. The `<ul class="k-menu-group">` element no longer includes the `k-reset` and `k-group` classes.
 
+## PanelBar
+
+The `id` attribute of each PanelBar item (`<li class="k-panelbar-item">`) is changed from `tree-item-A_B_C_...` to `tree-item-Z`, where `A`, `B`, and `C` were the parent item's indexes, and `Z` is the current item's index within its own group and hierarchy level.
+
 ## PDFViewer
 
 The `Open`, `Download` and `Print` tools have been moved to a submenu toggled on click of a hamburger menu on the leftmost side of the Toolbar.
diff --git a/upgrade/rendering-changes/list.md b/upgrade/rendering-changes/list.md
index 106f7dbc16..395d572498 100644
--- a/upgrade/rendering-changes/list.md
+++ b/upgrade/rendering-changes/list.md
@@ -10,13 +10,13 @@ position: 0
 
 As the Telerik UI for Blazor matures we will continuously optimize the HTML rendering and the usage of CSS classes. The rendering changes only affect the styling of the components if the application [overrides the built-in CSS styles]({%slug themes-override%}) or uses an outdated [custom theme]({%slug themes-customize%}). This article tracks the product versions with rendering changes.
 
-* [7.0.0]({%slug changes-in-7-0-0%})
-* [6.0.0]({%slug changes-in-6-0-0%})
-* [4.6.0]({%slug changes-in-4-6-0%})
-* [4.3.0]({%slug changes-in-4-3-0%})
-* [4.0.0]({%slug changes-in-4-0-0%})
-* [3.6.0]({%slug changes-in-3-6-0%})
-* [3.4.0]({%slug changes-in-3-4-0%})
+* [7.0.0]({%slug rendering-changes-in-7-0-0%})
+* [6.0.0]({%slug rendering-changes-in-6-0-0%})
+* [4.6.0]({%slug rendering-changes-in-4-6-0%})
+* [4.3.0]({%slug rendering-changes-in-4-3-0%})
+* [4.0.0]({%slug rendering-changes-in-4-0-0%})
+* [3.6.0]({%slug rendering-changes-in-3-6-0%})
+* [3.4.0]({%slug rendering-changes-in-3-4-0%})
 
 ## Good Styling Practices
 

From b38cb15658671bf90d00870abaafb82043f1809f Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 21 Oct 2024 22:50:27 +0300
Subject: [PATCH 02/16] doc(common): Breaking changes in v7 continued

---
 components/gantt/dependencies/databind.md | 188 ++++++-------
 components/gantt/dependencies/editing.md  | 195 +++++++-------
 components/gantt/dependencies/overview.md |  13 +-
 components/gantt/dependencies/types.md    | 313 ----------------------
 upgrade/breaking-changes/7-0-0.md         |   6 +
 upgrade/rendering-changes/7-0-0.md        |   1 +
 6 files changed, 209 insertions(+), 507 deletions(-)
 delete mode 100644 components/gantt/dependencies/types.md

diff --git a/components/gantt/dependencies/databind.md b/components/gantt/dependencies/databind.md
index 93ff273911..220369878a 100644
--- a/components/gantt/dependencies/databind.md
+++ b/components/gantt/dependencies/databind.md
@@ -6,6 +6,7 @@ slug: gantt-dependencies-databind
 tags: telerik,blazor,gantt,chart,dependency,databind,data,databound
 published: True
 position: 5
+previous_url: /components/gantt/dependencies/types
 ---
 
 # Dependencies Data Binding
@@ -18,10 +19,11 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
 
 | Feature | Type | Description |
 | --- | --- | --- |
-| `Data` | `IEnumerable<Object>` | The collection of dependencies. |
+| `Data` | `IEnumerable<object>` | 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. *@
 
-<TelerikGantt Data="@Data"
-              Width="100%"
+<TelerikGantt Data="@GanttData"
               Height="600px"
-              IdField="Id"
-              ParentIdField="ParentId"
+              IdField="@nameof(GanttFlatModel.Id)"
+              ParentIdField="nameof(GanttFlatModel.ParentId)"
               Sortable="true"
               SortMode="@SortMode.Multiple"
               FilterMode="@GanttFilterMode.FilterMenu"
-              FilterMenuType="@FilterMenuType.Menu">
-    <GanttToolBarTemplate>
-        <GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
-    </GanttToolBarTemplate>
+              FilterMenuType="@FilterMenuType.Menu"
+              OnEdit="@( (GanttEditEventArgs args) => args.IsCancelled = true )">
     <GanttViews>
         <GanttWeekView></GanttWeekView>
         <GanttMonthView></GanttMonthView>
@@ -49,125 +48,134 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
     </GanttViews>
     <GanttDependenciesSettings>
         <GanttDependencies Data="@Dependencies"
-                           PredecessorIdField="PredecessorId"
-                           SuccessorIdField="SuccessorId"
-                           TypeField="Type">
+                           IdField="@nameof(GanttDependencyModel.Id)"
+                           PredecessorIdField="@nameof(GanttDependencyModel.PredecessorId)"
+                           SuccessorIdField="@nameof(GanttDependencyModel.SuccessorId)"
+                           TypeField="@nameof(GanttDependencyModel.Type)">
         </GanttDependencies>
     </GanttDependenciesSettings>
     <GanttColumns>
-        <GanttColumn Field="Id"
+        <GanttColumn Field="@nameof(GanttFlatModel.Id)"
                      Visible="false">
         </GanttColumn>
-        <GanttColumn Field="Title"
+        <GanttColumn Field="@nameof(GanttFlatModel.Title)"
                      Expandable="true"
-                     Width="160px"
+                     Width="120px"
                      Title="Task Title">
         </GanttColumn>
-        <GanttColumn Field="PercentComplete"
-                     Width="100px">
+        <GanttColumn Field="@nameof(GanttFlatModel.PercentComplete)"
+                     Title="Complete"
+                     TextAlign="@ColumnTextAlign.Right"
+                     DisplayFormat="{0:p0}"
+                     Width="80px">
         </GanttColumn>
-        <GanttColumn Field="Start"
-                     Width="100px"
-                     TextAlign="@ColumnTextAlign.Right">
+        <GanttColumn Field="@nameof(GanttFlatModel.Start)"
+                     Width="80px"
+                     DisplayFormat="{0:d}">
         </GanttColumn>
-        <GanttColumn Field="End"
-                     DisplayFormat="End: {0:d}"
-                     Width="100px">
+        <GanttColumn Field="@nameof(GanttFlatModel.End)"
+                     DisplayFormat="{0:d}"
+                     Width="80px">
         </GanttColumn>
-        <GanttCommandColumn>
-            <GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
-            <GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
-        </GanttCommandColumn>
     </GanttColumns>
 </TelerikGantt>
 
-@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<GanttFlatModel> GanttData { get; set; } = new();
+    private List<GanttDependencyModel> 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<FlatModel> Data { get; set; }
-    List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
+    private int NextYear { get; set; } = DateTime.Today.AddYears(1).Year;
 
     protected override void OnInitialized()
     {
-        Data = new List<FlatModel>();
+        GanttData = new List<GanttFlatModel>();
 
-        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..5867eb53e3 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 *@
 
-<TelerikGantt Data="@Data"
-              Width="100%"
+<TelerikGantt Data="@GanttData"
               Height="600px"
-              IdField="Id"
-              ParentIdField="ParentId"
+              IdField="@nameof(GanttFlatModel.Id)"
+              ParentIdField="nameof(GanttFlatModel.ParentId)"
               Sortable="true"
               SortMode="@SortMode.Multiple"
               FilterMode="@GanttFilterMode.FilterMenu"
-              FilterMenuType="@FilterMenuType.Menu">
-    <GanttToolBarTemplate>
-        <GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
-    </GanttToolBarTemplate>
+              FilterMenuType="@FilterMenuType.Menu"
+              OnEdit="@( (GanttEditEventArgs args) => args.IsCancelled = true )">
     <GanttViews>
         <GanttWeekView></GanttWeekView>
         <GanttMonthView></GanttMonthView>
@@ -53,45 +42,52 @@ List of the available events:
     </GanttViews>
     <GanttDependenciesSettings>
         <GanttDependencies Data="@Dependencies"
-                           PredecessorIdField="PredecessorId"
-                           SuccessorIdField="SuccessorId"
-                           TypeField="Type"
+                           IdField="@nameof(GanttDependencyModel.Id)"
+                           PredecessorIdField="@nameof(GanttDependencyModel.PredecessorId)"
+                           SuccessorIdField="@nameof(GanttDependencyModel.SuccessorId)"
+                           TypeField="@nameof(GanttDependencyModel.Type)"
                            OnCreate="@CreateDependency"
                            OnDelete="@DeleteDependency">
         </GanttDependencies>
     </GanttDependenciesSettings>
     <GanttColumns>
-        <GanttColumn Field="Id"
+        <GanttColumn Field="@nameof(GanttFlatModel.Id)"
                      Visible="false">
         </GanttColumn>
-        <GanttColumn Field="Title"
+        <GanttColumn Field="@nameof(GanttFlatModel.Title)"
                      Expandable="true"
-                     Width="160px"
+                     Width="120px"
                      Title="Task Title">
         </GanttColumn>
-        <GanttColumn Field="PercentComplete"
-                     Width="100px">
+        <GanttColumn Field="@nameof(GanttFlatModel.PercentComplete)"
+                     Title="Complete"
+                     TextAlign="@ColumnTextAlign.Right"
+                     DisplayFormat="{0:p0}"
+                     Width="80px">
         </GanttColumn>
-        <GanttColumn Field="Start"
-                     Width="100px"
-                     TextAlign="@ColumnTextAlign.Right">
+        <GanttColumn Field="@nameof(GanttFlatModel.Start)"
+                     Width="80px"
+                     DisplayFormat="{0:d}">
         </GanttColumn>
-        <GanttColumn Field="End"
-                     DisplayFormat="End: {0:d}"
-                     Width="100px">
+        <GanttColumn Field="@nameof(GanttFlatModel.End)"
+                     DisplayFormat="{0:d}"
+                     Width="80px">
         </GanttColumn>
-        <GanttCommandColumn>
-            <GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
-            <GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
-        </GanttCommandColumn>
     </GanttColumns>
 </TelerikGantt>
 
 @code {
+    private List<GanttFlatModel> GanttData { get; set; } = new();
+    private List<GanttDependencyModel> 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<FlatModel> Data { get; set; }
-    List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
-
     protected override void OnInitialized()
     {
-        Data = new List<FlatModel>();
+        GanttData = new List<GanttFlatModel>();
 
-        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..35dcbbe7c6 100644
--- a/components/gantt/dependencies/overview.md
+++ b/components/gantt/dependencies/overview.md
@@ -12,17 +12,14 @@ position: 0
 
 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.
 
+## Basics
 
-#### To define dependencies in your Gantt Chart
+To define dependencies in your Gantt Chart
 
 * Add the `GanttDependenciesSettings` tag, child tag of the `<TelerikGantt>`
 * Inside the `GanttDependenciesSettings` add the `<GanttDependencies>` 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%}) allow 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 *@
-
-<TelerikGantt Data="@Data"
-              Width="100%"
-              Height="600px"
-              IdField="Id"
-              ParentIdField="ParentId"
-              Sortable="true"
-              SortMode="@SortMode.Multiple"
-              FilterMode="@GanttFilterMode.FilterMenu"
-              FilterMenuType="@FilterMenuType.Menu">
-    <GanttToolBarTemplate>
-        <GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
-    </GanttToolBarTemplate>
-    <GanttViews>
-        <GanttWeekView></GanttWeekView>
-        <GanttMonthView></GanttMonthView>
-        <GanttYearView></GanttYearView>
-    </GanttViews>
-    <GanttDependenciesSettings>
-        <GanttDependencies Data="@Dependencies"
-                           PredecessorIdField="PredecessorId"
-                           SuccessorIdField="SuccessorId"
-                           TypeField="Type">
-        </GanttDependencies>
-    </GanttDependenciesSettings>
-    <GanttColumns>
-        <GanttColumn Field="Id"
-                     Visible="false">
-        </GanttColumn>
-        <GanttColumn Field="Title"
-                     Expandable="true"
-                     Width="160px"
-                     Title="Task Title">
-        </GanttColumn>
-        <GanttColumn Field="PercentComplete"
-                     Width="100px">
-        </GanttColumn>
-        <GanttColumn Field="Start"
-                     Width="100px"
-                     TextAlign="@ColumnTextAlign.Right">
-        </GanttColumn>
-        <GanttColumn Field="End"
-                     DisplayFormat="End: {0:d}"
-                     Width="100px">
-        </GanttColumn>
-        <GanttCommandColumn>
-            <GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
-            <GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
-        </GanttCommandColumn>
-    </GanttColumns>
-</TelerikGantt>
-
-@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<FlatModel> Data { get; set; }
-    List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
-
-    protected override void OnInitialized()
-    {
-        Data = new List<FlatModel>();
-
-        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 *@
-
-<TelerikGantt Data="@Data"
-              Width="100%"
-              Height="600px"
-              IdField="Id"
-              ParentIdField="ParentId"
-              Sortable="true"
-              SortMode="@SortMode.Multiple"
-              FilterMode="@GanttFilterMode.FilterMenu"
-              FilterMenuType="@FilterMenuType.Menu">
-    <GanttToolBarTemplate>
-        <GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
-    </GanttToolBarTemplate>
-    <GanttViews>
-        <GanttWeekView></GanttWeekView>
-        <GanttMonthView></GanttMonthView>
-        <GanttYearView></GanttYearView>
-    </GanttViews>
-    <GanttDependenciesSettings>
-        <GanttDependencies Data="@Dependencies"
-                           PredecessorIdField="PredecessorId"
-                           SuccessorIdField="SuccessorId"
-                           TypeField="Type">
-        </GanttDependencies>
-    </GanttDependenciesSettings>
-    <GanttColumns>
-        <GanttColumn Field="Id"
-                     Visible="false">
-        </GanttColumn>
-        <GanttColumn Field="Title"
-                     Expandable="true"
-                     Width="160px"
-                     Title="Task Title">
-        </GanttColumn>
-        <GanttColumn Field="PercentComplete"
-                     Width="100px">
-        </GanttColumn>
-        <GanttColumn Field="Start"
-                     Width="100px"
-                     TextAlign="@ColumnTextAlign.Right">
-        </GanttColumn>
-        <GanttColumn Field="End"
-                     DisplayFormat="End: {0:d}"
-                     Width="100px">
-        </GanttColumn>
-        <GanttCommandColumn>
-            <GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
-            <GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
-        </GanttCommandColumn>
-    </GanttColumns>
-</TelerikGantt>
-
-@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<FlatModel> Data { get; set; }
-    List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
-
-    protected override void OnInitialized()
-    {
-        Data = new List<FlatModel>();
-
-        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/upgrade/breaking-changes/7-0-0.md b/upgrade/breaking-changes/7-0-0.md
index 0e968455ca..cb694f5b2c 100644
--- a/upgrade/breaking-changes/7-0-0.md
+++ b/upgrade/breaking-changes/7-0-0.md
@@ -30,6 +30,8 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 
 ## Gantt
 
+* The [`Type` property of `GanttDependencyCreateEventArgs`]({%slug gantt-dependencies-editing%}) changes from `int` to [`GanttDependencyType` enum](/blazor-ui/api/telerik.blazor.ganttdependencytype).
+* The [dependency model class of the Gantt]({%slug gantt-dependencies-databind%}) must use the `GanttDependencyType` enum for its `TypeField` property.
 
 ## Grid
 
@@ -52,3 +54,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 ## Upload
 
 * The obsolete method `OpenFileSelectAsync()` is removed. [Use `OpenSelectFilesDialog()`]({%slug upload-overview%}#upload-reference-and-methods) instead.
+
+## See Also
+
+* [Rendering changes in Telerik UI for Blazor 7.0.0]({%slug rendering-changes-in-7-0-0%})
diff --git a/upgrade/rendering-changes/7-0-0.md b/upgrade/rendering-changes/7-0-0.md
index efe7aea143..a0d23f010a 100644
--- a/upgrade/rendering-changes/7-0-0.md
+++ b/upgrade/rendering-changes/7-0-0.md
@@ -67,3 +67,4 @@ The `Open`, `Download` and `Print` tools have been moved to a submenu toggled on
 ## See Also
 
 * [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)
+* [Breaking changes in Telerik UI for Blazor 7.0.0]({%slug changes-in-7-0-0%})

From e6ee692f24d0580e1e6dec4d9e609c1d6e7cb554 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 21 Oct 2024 22:58:27 +0300
Subject: [PATCH 03/16] Mention .NET 7 support

---
 system-requirements.md            | 5 +++--
 upgrade/breaking-changes/7-0-0.md | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/system-requirements.md b/system-requirements.md
index 5a82ea08f9..009223285e 100644
--- a/system-requirements.md
+++ b/system-requirements.md
@@ -21,6 +21,7 @@ The latest version of Telerik UI for Blazor (currently {{site.uiForBlazorLatestV
 * `net6.0`
 * `net7.0`
 * `net8.0`
+* `net9.0`
 
 Razor Class Libraries may target `netstandard2.0` by default, so you need to update that.
 
@@ -36,6 +37,7 @@ A **supported .NET version** is one that is [officially supported by Microsoft](
 
 | .NET version | First UI for Blazor Version | Last UI for Blazor Version |
 | --- | --- | --- |
+| .NET 9 | 7.0.0 | {{site.uiForBlazorLatestVersion}} (current official) |
 | .NET 8 | 5.0.0 | {{site.uiForBlazorLatestVersion}} (current official) |
 | .NET 6 | 2.29.0 | {{site.uiForBlazorLatestVersion}} (current official) |
 
@@ -47,8 +49,7 @@ A **compatible .NET version** is one that is no longer (or not yet) officially s
 
 | .NET version | First UI for Blazor Version | Last UI for Blazor Version |
 | --- | --- | --- |
-| .NET 9 Preview | 6.0.0 | {{site.uiForBlazorLatestVersion}} (current official) |
-| .NET 7 | 3.7.0 | {{site.uiForBlazorLatestVersion}} (current official) |
+| .NET 7 | 3.7.0 | 6.2.0 |
 | .NET 5 | 2.19.0 | 4.6.0 |
 | .NET Core 3.1 | 2.5.0 | 4.6.0 |
 
diff --git a/upgrade/breaking-changes/7-0-0.md b/upgrade/breaking-changes/7-0-0.md
index cb694f5b2c..16e79cc0df 100644
--- a/upgrade/breaking-changes/7-0-0.md
+++ b/upgrade/breaking-changes/7-0-0.md
@@ -12,6 +12,10 @@ This article outlines the breaking changes in Telerik UI for Blazor version 7.0.
 
 ## Common
 
+### .NET Support
+
+[.NET 7 is no longer supported]({%slug system-requirements%}).
+
 ### AutoComplete, ComboBox, MultiColumnComboBox, MultiSelect
 
 The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.

From 70250d7f3eb55cce08976cc80f85433ca6135467 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:07:15 +0300
Subject: [PATCH 04/16] Fix slugs

---
 components/gantt/dependencies/overview.md    | 2 +-
 components/gantt/gantt-tree/editing/popup.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md
index 35dcbbe7c6..1d4c13d0ac 100644
--- a/components/gantt/dependencies/overview.md
+++ b/components/gantt/dependencies/overview.md
@@ -10,7 +10,7 @@ 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 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 of different dependecy types]({%slug gantt-dependencies-databind%}) and allow your users to [edit]({%slug gantt-dependencies-editing%}) the dependencies.
 
 ## Basics
 
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.

From 7cec6969ca935891f7431ba5bbdb736239e81423 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:17:32 +0300
Subject: [PATCH 05/16] Update components/gantt/dependencies/editing.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 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 5867eb53e3..1e8aad8d6e 100644
--- a/components/gantt/dependencies/editing.md
+++ b/components/gantt/dependencies/editing.md
@@ -18,7 +18,7 @@ This section explains the available events that you need to use for creating and
 
 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.
+* `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

From 2646e2abc4610dded8a8c43230e044fb67b7411e Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:17:46 +0300
Subject: [PATCH 06/16] Update components/gantt/dependencies/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 components/gantt/dependencies/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md
index 1d4c13d0ac..8ee6fe6d1d 100644
--- a/components/gantt/dependencies/overview.md
+++ b/components/gantt/dependencies/overview.md
@@ -10,7 +10,7 @@ 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 of different dependecy types]({%slug gantt-dependencies-databind%}) 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
 

From 805a52b2fa270b32b1460ec1df0330184450b6a0 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:17:56 +0300
Subject: [PATCH 07/16] Update components/gantt/dependencies/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 components/gantt/dependencies/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md
index 8ee6fe6d1d..7d971c44bf 100644
--- a/components/gantt/dependencies/overview.md
+++ b/components/gantt/dependencies/overview.md
@@ -14,7 +14,7 @@ The Telerik Gantt for Blazor lets you define dependencies, which are rendered in
 
 ## Basics
 
-To define dependencies in your Gantt Chart
+To define dependencies in your Gantt Chart:
 
 * Add the `GanttDependenciesSettings` tag, child tag of the `<TelerikGantt>`
 * Inside the `GanttDependenciesSettings` add the `<GanttDependencies>` and provide a data collection to the `Data` parameter. 

From 4e6cf761b77488a80b816edd033edd47a858a38d Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:18:06 +0300
Subject: [PATCH 08/16] Update components/gantt/dependencies/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 components/gantt/dependencies/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md
index 7d971c44bf..62eeb37fca 100644
--- a/components/gantt/dependencies/overview.md
+++ b/components/gantt/dependencies/overview.md
@@ -16,7 +16,7 @@ The Telerik Gantt for Blazor lets you define dependencies, which are rendered in
 
 To define dependencies in your Gantt Chart:
 
-* Add the `GanttDependenciesSettings` tag, child tag of the `<TelerikGantt>`
+* Add the `GanttDependenciesSettings` tag, child tag of the `<TelerikGantt>`.
 * Inside the `GanttDependenciesSettings` add the `<GanttDependencies>` and provide a data collection to the `Data` parameter. 
 
 ## Gantt Dependency Features

From 34464a3597add90710068338c85774dc51778200 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:18:15 +0300
Subject: [PATCH 09/16] Update components/gantt/dependencies/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 components/gantt/dependencies/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/gantt/dependencies/overview.md b/components/gantt/dependencies/overview.md
index 62eeb37fca..d02f70431c 100644
--- a/components/gantt/dependencies/overview.md
+++ b/components/gantt/dependencies/overview.md
@@ -22,4 +22,4 @@ To define dependencies in your Gantt Chart:
 ## Gantt Dependency Features
 
 * [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%}) allow the user to edit the dependencies.
+* [Dependency Editing]({%slug gantt-dependencies-editing%}) allows the user to edit the dependencies.

From 2a02d680dd791dfcd6c3110803ab235a6829397c Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:18:27 +0300
Subject: [PATCH 10/16] Update components/textarea/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 components/textarea/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/textarea/overview.md b/components/textarea/overview.md
index ced339b308..321b683ea5 100644
--- a/components/textarea/overview.md
+++ b/components/textarea/overview.md
@@ -55,7 +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 `<textarea>`. |
-| `ResizeMode` | `TextAreaResizeMode?` | Specifies the TextArea's resize behavior. Default behavior is the one set by the browser. You can also [use CSS to limit the resizing up to a max height]({%slug textarea-kb-autosize-max-height%}). |
+| `ResizeMode` | `TextAreaResizeMode?` | Specifies the TextArea's resize behavior. The default behavior is the one set by the browser. You can also [use CSS to limit the resizing up to a max height]({%slug textarea-kb-autosize-max-height%}). |
 | `Class` | `string` | The custom CSS class to be rendered on the `<span class="k-textarea">` element. |
 | `Cols` | `int?` | Maps to the `cols` attribute of the HTML `<textarea>` element. Do not use together with `Width`.
 | `DebounceDelay` | `int` | Specifies the time in milliseconds between the last typed symbol and the updating of the value. The default value is 150ms. |

From a2b2394be17a6bdcbb0eff1c8886d7764007e283 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:18:37 +0300
Subject: [PATCH 11/16] Update knowledge-base/radiogroup-like-buttongroup.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 knowledge-base/radiogroup-like-buttongroup.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/radiogroup-like-buttongroup.md b/knowledge-base/radiogroup-like-buttongroup.md
index 39cf764268..17e11d11f0 100644
--- a/knowledge-base/radiogroup-like-buttongroup.md
+++ b/knowledge-base/radiogroup-like-buttongroup.md
@@ -31,7 +31,7 @@ Use custom CSS to make the radio inputs invisible and style their labels to look
 
 The RadioGroup will look similar to a [ButtonGroup with single selection]({%slug buttongroup-selection%}#single-selection). The major difference is that the RadioGroup has a single value of type `<T>`, while each button in the ButtonGroup is bound to a separate `boolean` value for its selected state.
 
->tip The following example is for versions 6.0 and above, which feature an [updated HTML rendering for the RadioGroup]({%slug rendering-changes-in-6-0-0%}#radiogroup). If you are using an older version, use the [alternative CSS code from the section below](#solution-up-to-version-511).
+>tip The following example is for versions 6.0 and later, which feature an [updated HTML rendering for the RadioGroup]({%slug rendering-changes-in-6-0-0%}#radiogroup). If you are using an older version, use the [alternative CSS code from the section below](#solution-up-to-version-511).
 
 >caption Style the RadioGroup like a ButtonGroup
 

From 7996682788a2826d1c79a3e128a695312bf010d3 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:18:44 +0300
Subject: [PATCH 12/16] Update knowledge-base/textarea-autosize-max-height.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 knowledge-base/textarea-autosize-max-height.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/textarea-autosize-max-height.md b/knowledge-base/textarea-autosize-max-height.md
index 657ad9d976..564657a4ad 100644
--- a/knowledge-base/textarea-autosize-max-height.md
+++ b/knowledge-base/textarea-autosize-max-height.md
@@ -56,7 +56,7 @@ This KB article answers the following questions:
 }
 ````
 
-> Use `AutoSize="true"` instead of `ResizeMode="TextAreaResizeMode.Auto"` with Telerik UI for Blazor versions `6.x` and older.
+> Use `AutoSize="true"` instead of `ResizeMode="TextAreaResizeMode.Auto"` with Telerik UI for Blazor versions `6.x` and earlier.
 
 ## See Also
 

From 17c99354abd740de82a61dc82455d64d3d307ba2 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:19:28 +0300
Subject: [PATCH 13/16] Update upgrade/breaking-changes/7-0-0.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 upgrade/breaking-changes/7-0-0.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/upgrade/breaking-changes/7-0-0.md b/upgrade/breaking-changes/7-0-0.md
index 16e79cc0df..1f04732839 100644
--- a/upgrade/breaking-changes/7-0-0.md
+++ b/upgrade/breaking-changes/7-0-0.md
@@ -52,7 +52,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 
 * Columns with `Visible="false"` are editable by default in popup edit mode. To avoid this, [set `Editable="false"` together with `Visible="false"`]({%slug treelist-editing-popup%}).
 * The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug treelist-columns-resize%}#autofit-columns) instead.
-* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumsAsync()` instead.
+* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
 * The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
 
 ## Upload

From 8a9fa0334517bcd3bc98d818bc83a2010b190b76 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:19:37 +0300
Subject: [PATCH 14/16] Update upgrade/breaking-changes/7-0-0.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
---
 upgrade/breaking-changes/7-0-0.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/upgrade/breaking-changes/7-0-0.md b/upgrade/breaking-changes/7-0-0.md
index 1f04732839..28768862f3 100644
--- a/upgrade/breaking-changes/7-0-0.md
+++ b/upgrade/breaking-changes/7-0-0.md
@@ -41,7 +41,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 
 * Columns with `Visible="false"` are editable by default in popup edit mode. To avoid this, [set `Editable="false"` together with `Visible="false"`]({%slug components/grid/editing/popup%}).
 * The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug components/grid/columns/resize%}#autofit-columns) instead.
-* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumsAsync()` instead.
+* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
 * The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
 
 ## TextArea

From 051c7c3b05d6b8959227c9d8f47ea5847ae0bc7e Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 09:57:00 +0300
Subject: [PATCH 15/16] reword hidden columns editability

---
 upgrade/breaking-changes/7-0-0.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/upgrade/breaking-changes/7-0-0.md b/upgrade/breaking-changes/7-0-0.md
index 28768862f3..5ec5bbe374 100644
--- a/upgrade/breaking-changes/7-0-0.md
+++ b/upgrade/breaking-changes/7-0-0.md
@@ -39,7 +39,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 
 ## Grid
 
-* Columns with `Visible="false"` are editable by default in popup edit mode. To avoid this, [set `Editable="false"` together with `Visible="false"`]({%slug components/grid/editing/popup%}).
+* Columns with `Visible="false"` are editable by default in popup edit mode. To disable editing of a hidden column, [set `Editable="false"` together with `Visible="false"`]({%slug components/grid/editing/popup%}).
 * The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug components/grid/columns/resize%}#autofit-columns) instead.
 * The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
 * The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
@@ -50,7 +50,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 
 ## TreeList
 
-* Columns with `Visible="false"` are editable by default in popup edit mode. To avoid this, [set `Editable="false"` together with `Visible="false"`]({%slug treelist-editing-popup%}).
+* Columns with `Visible="false"` are editable by default in popup edit mode. To disable editing of a hidden column, [set `Editable="false"` together with `Visible="false"`]({%slug treelist-editing-popup%}).
 * The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug treelist-columns-resize%}#autofit-columns) instead.
 * The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
 * The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.

From 0ea0f055cfe654bef044240eb407a2d73c4a3f17 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 10:59:11 +0300
Subject: [PATCH 16/16] reword

---
 upgrade/breaking-changes/7-0-0.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/upgrade/breaking-changes/7-0-0.md b/upgrade/breaking-changes/7-0-0.md
index 5ec5bbe374..6e3b2ddf18 100644
--- a/upgrade/breaking-changes/7-0-0.md
+++ b/upgrade/breaking-changes/7-0-0.md
@@ -39,7 +39,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 
 ## Grid
 
-* Columns with `Visible="false"` are editable by default in popup edit mode. To disable editing of a hidden column, [set `Editable="false"` together with `Visible="false"`]({%slug components/grid/editing/popup%}).
+* Columns with `Visible="false"` are editable by default in popup edit mode. To [disable editing of a hidden column, set `Editable="false"`]({%slug components/grid/editing/popup%}) explicitly.
 * The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug components/grid/columns/resize%}#autofit-columns) instead.
 * The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
 * The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
@@ -50,7 +50,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 
 ## TreeList
 
-* Columns with `Visible="false"` are editable by default in popup edit mode. To disable editing of a hidden column, [set `Editable="false"` together with `Visible="false"`]({%slug treelist-editing-popup%}).
+* Columns with `Visible="false"` are editable by default in popup edit mode. To [disable editing of a hidden column, set `Editable="false"`]({%slug treelist-editing-popup%}) explicitly.
 * The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug treelist-columns-resize%}#autofit-columns) instead.
 * The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
 * The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.