Sync with Kendo UI Professional

docs-aspnet/_config.yml

@@ -576,10 +576,10 @@ navigation:
 baseurl: /aspnet-core
 
 ## The Kendo UI version used
-cdnVersion: "2020.2.617"
+cdnVersion: "2020.3.915"
 
 ## The MVC Core version used
-mvcCoreVersion: "2020.2.617"
+mvcCoreVersion: "2020.3.915"
 
 ff-sheet-id: 1mottKpkbJFxkUq6rS3CsPrT8JQOE2JlUtsJBR622cxs
 

docs-aspnet/html-helpers/interactivity/loader/overview.md

@@ -12,7 +12,7 @@ The Telerik UI Loader HtmlHelper for {{ site.framework }} is a server-side wrapp
 
 The Loader component is a visual indicator that expresses an indeterminate wait time. It informs users about the status of ongoing processes, such as loading an application, submitting a form, saving updates or fetching data.
 
-## Initializing the Badge
+## Initializing the Loader
 
 The following example demonstrates how to define the Loader by using the Loader HtmlHelper.
 

docs-aspnet/html-helpers/scheduling/gantt/binding.md

@@ -4,7 +4,7 @@ page_title: Data Binding
 description: "Learn the binding options for the Telerik UI Gantt HtmlHelper for {{ site.framework }}."
 previous_url: /helpers/scheduling/gantt/server-binding
 slug: htmlhelpers_gantt_binding_aspnetcore
-position: 2
+position: 3
 ---
 
 # Data Binding
@@ -22,6 +22,7 @@ The following example demonstrates how to bind the Gantt through the `TaskViewMo
     public class TaskViewModel : IGanttTask
     {
         public int TaskID { get; set; }
+        //ParentID should be nullable:
         public int? ParentID { get; set; }
 
         public string Title { get; set; }

docs-aspnet/html-helpers/scheduling/gantt/columns.md

@@ -3,18 +3,35 @@ title: Columns
 page_title: Columns
 description: "Configure the columns of the Telerik UI Gantt HtmlHelper for {{ site.framework }}."
 slug: htmlhelpers_gantt_columns_aspnetcore
-position: 3
+position: 4
 ---
 
 # Columns
 
 The columns in the TreeList section of the Gantt can be individually configured. The following configuration options are supported:
 
-* `Title` - the header text of the column.
-* `Sortable` - whether the column can be sorted, or not.
-* `Editable` - whether the column can be edited, or not.
-* `Width` - the width of the column.
-* `Format` - the format in which the data in the column is represented.
+- `Bound`—Binds the task to the specified model field.
+- `Columns`—The columns which will be rendered as child columns under this group column header.
+- `Editor`—Provides a way to specify a custom editing UI for the column.
+- `Editable`—Indicates if the column can be edited.
+- `Expandable`—If set to `true`, the column will show the icons that are used for expanding and collapsing child rows. By default, the first column of the TreeList is expandable.
+- `Field`—The field from the task model which will be used to populate the column.
+- `Filterable`—If set to `true` and if filtering is enabled, a filter menu will be displayed for this column. If set to `false`, the filter menu will not be displayed. By default, a filter menu is displayed for all columns when filtering is enabled through the filterable option.
+- `Filterable.Ui`—The `role` data attribute of the widget that is used in the filter menu, or a JavaScript function which initializes that widget.
+- `Format`—The format in which the data in the column is represented.
+- `HeaderAttributes`—The HTML attributes of the table header cell (`th`) that is rendered for the column.
+- `HeaderTemplate`—The template which renders the column header content. By default, the value of the title column option is displayed in the column header cell.
+- `HeaderTemplateId`—The id of the header template.
+- `Hidden`—If set to `true`, the Gantt will not display the column. By default, all columns are displayed.
+- `HtmlAttributes`—The HTML attributes of the table cell (`td`) that is rendered for the column.
+- `Menu`—If set to `true`, the Gantt will display the column in the column menu. By default, the column menu includes all data-bound columns.
+- `MinScreenWidth`—The pixel screen width below which the column will be hidden. The setting takes precedence over the hidden setting and the two cannot not be used at the same time.
+- `Sortable`—Indicates if the column can be sorted. If set to `true` and sorting is enabled, the user can click the column header and sort the treelist by the column field. If set to `false`, sorting will be disabled for this column. By default, all columns are sortable if sorting is enabled though the sortable option.
+- `Sortable.Compare`—A JavaScript function for comparing the values.
+- `Template`—The template which renders the column content. The Gantt renders table rows (`tr`) which represent the data source items. Each table row consists of table cells (`td`) which represent the treelist columns. By default, the HTML-encoded value of the field is displayed in the column.
+- `TemplateId`—The id of the column template.
+- `Title`—The header text of the column.
+- `Width`—The width of the column.
 
 The example below demonstrates how to configure Gantt columns.
 

docs-aspnet/html-helpers/scheduling/gantt/layout.md

@@ -0,0 +1,52 @@
+---
+title: Layout
+page_title: Layout
+description: "Learn more about the layout of the Telerik UI Gantt HtmlHelper for {{ site.framework }}."
+slug: htmlhelpers_gantt_layout_aspnetcore
+position: 2
+---
+
+# Layout
+
+The layout of the Gantt consists of a GanttList and a Timeline sections. They are divided by a splitbar, which allows increasing the width of one of the sections at the expense of the other. 
+
+## GanttList
+
+The GanttList of the Gantt extends the TreeList widget and offers its functionality. For more details on the configuration and features of the TreeList, refer to its documentation and demos.
+
+* [TreeList Documentation](https://docs.telerik.com/kendo-ui/controls/data-management/treelist/overview)
+* [TreeList Demos](https://demos.telerik.com/kendo-ui/treelist/index)
+* [TreeList API](/api/javascript/ui/treelist)
+
+The following features of the TreeList are currently not supported by the GanttList.
+
+* Locked columns
+* Column commands
+* Encoded column value
+* Column footer template
+* Binding the parent column, in scenarios that involve grouped columns
+* More than one level of grouping
+
+### Getting a Reference to the GanttList
+
+The example below demonstrates how to get a reference to a GanttList.
+
+    // Place this after the Gantt for {{ site.framework }} declaration.
+    <script>
+        $(document).ready(function() {
+            // The Name() of the Gantt is used to get its client-side instance.
+            var gantt = $("#gantt").data("kendoGantt");
+            // Get a reference to the GanttList.
+            var ganttList = gantt.list;
+        });
+    </script>
+
+## Timeline
+
+The Timeline section visualizes the tasks and diplays start and end dates, progress, resources, and dependency relationships between tasks. The Timeline allows different ways of interaction with the tasks. You can resize, move, remove, edit, or change the dependencies of the tasks. 
+
+## See Also
+
+* [Basic Usage of the Gantt HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt)
+* [Using the API of the Gantt HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/api)
+* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt)

docs-aspnet/html-helpers/scheduling/gantt/overview.md

@@ -235,8 +235,10 @@ The following example demonstrates the basic configuration of the Gantt HtmlHelp
 
 ## Functionality and Features
 
+* [Layout]({% slug htmlhelpers_gantt_layout_aspnetcore %})
 * [Data binding]({% slug htmlhelpers_gantt_binding_aspnetcore %})
 * [Columns]({% slug htmlhelpers_gantt_columns_aspnetcore %})
+* [Planned vs Actual]({% slug htmlhelpers_gantt_planned_vs_actual_aspnetcore %})
 * [Resources]({% slug htmlhelpers_gantt_resources_aspnetcore %})
 * [Templates]({% slug htmlhelpers_gantt_templates_aspnetcore %})
 * [Accessibility]({% slug accessibility_aspnetcore_gantt %})

docs-aspnet/html-helpers/scheduling/gantt/planned-vs-actual.md

@@ -0,0 +1,82 @@
+---
+title: Planned vs Actual
+page_title: Data Binding
+description: "Learn more about how the Telerik UI Gantt HtmlHelper for {{ site.framework }} displays planned and actual dates."
+slug: htmlhelpers_gantt_planned_vs_actual_aspnetcore
+position: 4
+---
+
+# Planned vs Actual
+
+The `Planned vs Actual` functionality of the Gantt allows you to compare actual `start` and `end` dates to originaly planned dates. If the actual completion date of a task matches the planned end time date, the default task appearance is used. In the scenarios listed below, when there is a difference between an actual and a planned date, the Gantt visualizes it by changing the appearance of the task:
+
+* The actual `end` date of the task is before the planned `end` date - the task is colored green.
+* The actual `end` date of the task is after the planned `end` date - a hatched bar that marks the delay is rendered in the task. 
+* The actual `start` date of the task is after the planned `end` date - the task is colored red.
+
+For a full example of the Planned vs Actual functionality, refer to the [Planned vs Actual (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/planned-vs-actual).
+
+## Configuration
+
+The example below demonstrates how to configure the Gantt to display planned and actual dates.
+
+```
+@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
+    .Name("gantt")
+    .Columns(columns =>
+    {
+        columns.Bound(c => c.Title).Title("Task").Editable(true).Sortable(true).Width(200);
+        columns.Bound(c => c.Start).Title("Actual Start Date").Format("{0:M/d/yyyy}").Width(85);
+        columns.Bound(c => c.End).Title("Actual End Date").Format("{0:M/d/yyyy}").Width(85);
+        columns.Bound(c => c.PlannedStart).Title("Planned Start Date").Format("{0:M/d/yyyy}").Width(85);
+        columns.Bound(c => c.PlannedEnd).Title("Planned End Date").Format("{0:M/d/yyyy}").Width(85);
+    })
+    .Views(views =>
+    {
+        views.DayView();
+        views.WeekView(weekView => weekView.Selected(true));
+        views.MonthView();
+    })
+    .ShowPlannedTasks(true)
+    .Toolbar(t => t.Add().Name("plannedTasks"))
+    .Editable(e => e.PlannedTasks(true))
+    .Resizable(true)
+    .Snap(false)
+    .DataSource(d => d
+        .Model(m =>
+        {
+            m.Id(f => f.TaskID);
+            m.ParentId(f => f.ParentID);
+            m.OrderId(f => f.OrderId);
+            m.Field(f => f.Expanded).DefaultValue(true);
+            m.Field(f => f.PlannedStart);
+            m.Field(f => f.PlannedEnd);
+        })
+        .Read("Planned_Vs_Actual_Read_Tasks", "Gantt")
+    )
+    .DependenciesDataSource(d => d
+        .Model(m =>
+        {
+            m.Id(f => f.DependencyID);
+            m.PredecessorId(f => f.PredecessorID);
+            m.SuccessorId(f => f.SuccessorID);
+            m.Type(f => f.Type);
+        })
+        .Read("Planned_Vs_Actual_Read_Dependencies", "Gantt")
+        .Create("Planned_Vs_Actual_Create_Dependency", "Gantt")
+        .Destroy("Planned_Vs_Actual_Destroy_Dependency", "Gantt")
+    )
+)
+```
+
+The `plannedTasks` tool set in the `Toolbar` configuration enables a switch in the toolbar of the Gantt that allows toggling the `Planned vs Actual` functionality. 
+
+The `ShowPlannedTasks` configuration controls whether planned dates will be shown initially.
+
+Through the `Editable` configuration, you can allow or prevent editing of planned tasks.
+
+## See Also
+
+* [Planned vs Actual (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/planned-vs-actual)
+* [Using the API of the Gantt HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/api)
+* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt)

docs-aspnet/html-helpers/scheduling/gantt/resources.md

@@ -3,7 +3,7 @@ title: Resources
 page_title: Resources
 description: "Use resources in the Telerik UI Gantt HtmlHelper for {{ site.framework }}."
 slug: htmlhelpers_gantt_resources_aspnetcore
-position: 4
+position: 5
 ---
 
 # Resources

docs-aspnet/html-helpers/scheduling/gantt/templates.md

@@ -3,7 +3,7 @@ title: Templates
 page_title: Templates
 description: "Use templates and customize the rendering of the tasks of the Telerik UI Gantt HtmlHelper for {{ site.framework }}."
 slug: htmlhelpers_gantt_templates_aspnetcore
-position: 5
+position: 6
 ---
 
 # Templates

docs/_config.yml

@@ -683,10 +683,10 @@ navigation:
 baseurl: /kendo-ui
 
 ## The Kendo UI version used
-cdnVersion: "2020.2.617"
+cdnVersion: "2020.3.915"
 
 ## The MVC Core version used
-mvcCoreVersion: "2020.2.617"
+mvcCoreVersion: "2020.3.915"
 
 ## Progress NPM Registry
 registry_url: 'https://registry.npm.telerik.com/'