docs(common): Document breaking changes in version 7.0.0

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%}). |

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,144 +32,150 @@ 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>
         <GanttYearView></GanttYearView>
     </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%})