Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/_config-mvc.yml

@@ -70,7 +70,7 @@ knowledge-base/validator-basic-form-validation.md,
 knowledge-base/vs-online-continuous-integration-login-problem.md,
 knowledge-base/grid-toggle-editable-mode.md,
 knowledge-base/grid-export-parent-and-all-detail-grids-to-excel.md,
-html-helpers/data-management/grid/binding/local.md,
+html-helpers/data-management/grid/binding/razor-page.md,
 knowledge-base/vs-2015-support.md,
 knowledge-base/trial-to-commercial-license-troubleshooting.md,
 knowledge-base/vs-code-extension-issues.md,

docs-aspnet/getting-started-mvc/first-steps.md

@@ -29,10 +29,7 @@ Other popular approaches for starting with Telerik UI for ASP.NET MVC include:
 
 * Telerik UI for ASP.NET MVC requires the <a href="https://dotnet.microsoft.com/download/dotnet-framework" target="_blank">.NET Framework</a>.
 
-* [Visual Studio](https://www.visualstudio.com/downloads/) 2012 or later.
-
-   For Visual Studio 2017 or later, you must install the **ASP.NET & web development** workload. See Microsoft's <a href="/docs.microsoft.com/en-us/visualstudio/install/install-visual-studio?view=vs-2019#step-4---choose-workloads" target="_blank">Install Visual Studio workloads</a> documentation for guidance.
-   
+* [Visual Studio](https://www.visualstudio.com/downloads/) 2019, 2022, or later.
 * [Telerik account](https://www.telerik.com/account).
 
 ## Downloading and Installing
@@ -69,13 +66,19 @@ After the Visual Studio Extensions are installed, create a Telerik ASP.NET MVC a
 
 	![{{ site.product_short }} Create a new Telerik application](../getting-started-mvc/images/create-new-project-mvc.png)
 
-1. Select the **GRID AND MENU** template.
+1. Configure the project. Click **Create**.
+
+    ![{{ site.product_short }} Configure the project](../getting-started-mvc/images/configure-new-mvc-project.png)
+
+1. Select the **GRID AND MENU** template. Click **Next**.
 
    For more information on the additional predefined Telerik template options, refer to the [Creating New Projects]({% slug newprojectwizards_visualstudio_aspnetcore %}) article. 
 
 	![{{ site.product_short }} New Project Wizard templates](../getting-started-mvc/images/create-new-project-templates-mvc.png)
 
-1. Select the **Default-v2** visual theme for your Telerik ASP.NET MVC Application, and click **Finish** to complete the creation of the application.
+1. Choose a [Theme](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/overview#using-the-build-process-of-the-themes). Click **Finish**.
+
+![{{ site.product_short }} Choose a Theme](../getting-started-mvc/images/select-theme-project-template-mvc.png)
 
 The newly created application already has a reference to the required `Kendo.Mvc.dll` assembly. The wizard also references the client-side resources (the Kendo UI script and theme-related CSS files) in the `_Layout.cshtml`. 
 

docs-aspnet/getting-started-mvc/images/configure-new-mvc-project.png

@@ -35,12 +35,14 @@ To configure the Grid for {{ site.framework }} to do local binding:
 
 1. Open the `HomeController.cs` and return an `IEnumerable` of the model type with the View. This is the `View()` which holds the Grid definition.
 
+    {% if site.core %}
+    ```HomeController.cs      
         public IActionResult Index()
         {
             // Returns a collection of OrderViewModels.
             var model = orderService.Read();
 
-             /* For a quick test, you can mock the data, and copy and paste this snippet.
+                /* For a quick test, you can mock the data, and copy and paste this snippet.
             var model = Enumerable.Range(1, 20).Select(i => new OrderViewModel
             {
                 OrderID = i,
@@ -50,6 +52,26 @@ To configure the Grid for {{ site.framework }} to do local binding:
 
             return View(model);
         }
+    ```
+    {% else %}
+    ```HomeController.cs  
+        public ActionResult Index()
+        {
+            // Returns a collection of OrderViewModels.
+            var model = orderService.Read();
+
+            /* For a quick test, you can mock the data, and copy and paste this snippet.
+            var model = Enumerable.Range(1, 20).Select(i => new OrderViewModel
+            {
+                OrderID = i,
+                ShipCountry = i % 2 == 0 ? "ShipCountry 1" : "ShipCountry 2"
+            });
+            */
+
+            return View(model);
+        }  
+    ```
+    {% endif %}
 
 1. In the `Index.cshtml` view, configure the Grid to accept the model in its constructor and set `ServerOperations(false)`.
 

docs-aspnet/getting-started-mvc/images/create-new-project-mvc.png

@@ -8,65 +8,83 @@ position: 5
 
 # Events
 
-You can subscribe to [all DataSource events](/api/kendo.mvc.ui.fluent/datasourceeventbuilder) and then use them to further customize the behavior of the DataSource.
+You can subscribe to the [available DataSource events](/api/kendo.mvc.ui.fluent/datasourceeventbuilder) and further customize the behavior of the DataSource.
 
-The example below demonstrates how to use the [`Error`](/api/kendo.mvc.ui.fluent/datasourceeventbuilder#errorsystemstring), [`RequestStart`](/api/kendo.mvc.ui.fluent/datasourceeventbuilder#requeststartsystemstring) and [`RequestEnd`](/api/kendo.mvc.ui.fluent/datasourceeventbuilder#requestendsystemstring) events.
+## Handling by Handler Name
 
-```HtmlHelper
-    @using Kendo.Mvc.UI
+The following example demonstrates how to subscribe to events by a handler name.
 
-   @(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
+```HtmlHelper
+   @(Html.Kendo().DataSource<ProductViewModel>()
         .Name("dataSource1")
         .Ajax(dataSource => dataSource
-        .Read(read => read.Action("Products_Read", "DataSource"))
-        .ServerOperation(true)
-        .PageSize(12)
-        .Events(e=>e.Error("error_handler").RequestStart("onRequestStart").Request("onRequestEnd"))
+            .Events(ev => ev.RequestStart("onRequestStart"))
+            .Read(read => read.Action("Products_Read", "DataSource"))
+            ... // Additional configuration
         )
     )
+
+    <script>
+        function onRequestStart(e){
+            // Handle the RequestStart event that triggers the DataSource makes a request to the remote service.
+        }
+    </script>
 ```
+
 {% if site.core %}
 ```TagHelper
-    <kendo-datasource name="dataSource1" type="DataSourceTagHelperType.Ajax" server-operation="true" page-size="12"
-        on-error="error_handler"
-        on-request-end="onRequestEnd"
-        on-request-start="onRequestStart">
+    <kendo-datasource name="dataSource1" type="DataSourceTagHelperType.Ajax" on-request-start="onRequestStart">
         <transport>
             <read url="@Url.Action("Products_Read", "DataSource")" />
         </transport>
+        <!-- Additional configuration -->
     </kendo-datasource>
+
+    <script>
+        function onRequestStart(e){
+            // Handle the RequestStart event that triggers when the DataSource makes a request to the remote service.
+        }
+    </script>
 ```
 {% endif %}
-```JavaScript
-    function error_handler(e){
-        if (e.errors) {
-            var message = "Errors:\n";
-            $.each(e.errors, function (key, value) {
-                if ('errors' in value) {
-                    $.each(value.errors, function () {
-                        message += this + "\n";
-                    });
+
+## Handling by Template Delegate
+
+The following example demonstrates how to subscribe to events by a template delegate.
+
+```HtmlHelper
+   @(Html.Kendo().DataSource<ProductViewModel>()
+        .Name("dataSource1")
+        .Ajax(dataSource => dataSource
+            .Read(read => read.Action("Products_Read", "DataSource"))
+            .Events(e => e.RequestStart(@<text>
+                function() {
+                    // Handle the RequestStart event inline.
                 }
-            });
-            alert(message);
-        }
-    }
-    function onRequestStart(e){
-        if(e.type=="create"){
-            //apply logic
-        }
-    }
-    function onRequestEnd(e){
-        //access the raw remote service response
-        console.log(e.response);
-    }
+                </text>)
+            )
+            ... // Additional configuration
+        )
+    )
 ```
 
-## Next Steps
-
-* [API for Configuring the DataSource Events](/api/kendo.mvc.ui.fluent/datasourceeventbuilder)
-* [Using the DataSource Events (Demo)](https://demos.telerik.com/{{ site.platform }}/datasource/events)
+{% if site.core %}
+```TagHelper
+    <kendo-datasource name="dataSource1" type="DataSourceTagHelperType.Ajax" on-request-start="function() {
+            // Handle the RequestStart event inline.
+        }">
+        <transport>
+            <read url="@Url.Action("Products_Read", "DataSource")" />
+        </transport>
+        <!-- Additional configuration -->
+    </kendo-datasource>
+```
+{% endif %}
 
 ## See Also
 
-* [Using the API of the DataSource for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/datasource/api)
+* [DataSource Server-Side API for {{ site.framework}}](/api/datasource)
+{% if site.core %}
+* [DataSource Server-Side TagHelper API for ASP.NET Core](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/datasource)
+{% endif %}
+* [DataSource Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource)

docs-aspnet/getting-started-mvc/images/create-new-project-templates-mvc.png

@@ -88,8 +88,8 @@ The example below relies on the following key steps:
     <script>
         // Use Promises to sync the exports.
         var promises = [
-        $.Deferred(),
-        $.Deferred()
+            $.Deferred(),
+            $.Deferred()
         ];
 
         function exportDataClick(e) { //"Export to Excel" button "click" event handler.
@@ -102,19 +102,26 @@ The example below relies on the following key steps:
             .then(function (productsWorkbook, ordersWorkbook) {
                 // Create a new workbook using the sheets of the "products" and "orders" workbooks.
                 var sheets = [
-                productsWorkbook.sheets[0],
-                ordersWorkbook.sheets[0]
+                    productsWorkbook.sheets[0],
+                    ordersWorkbook.sheets[0]
                 ];
                 sheets[0].title = "Products";
                 sheets[1].title = "Orders";
                 var workbook = new kendo.ooxml.Workbook({
                     sheets: sheets
                 });
                 // Save the new workbook.
-                kendo.saveAs({
-                    dataURI: workbook.toDataURL(),
-                    fileName: "ProductsAndOrders.xlsx"
-                })
+                workbook.toDataURLAsync().then(function(dataURL) {
+                    kendo.saveAs({
+                        dataURI: dataURL,
+                        fileName: "ProductsAndOrders.xlsx"
+                    });
+                });
+
+                promises = [
+                    $.Deferred(),
+                    $.Deferred()
+                ];
             });
         }
         function products_excelExport(e) { //"ExcelExport" event handler of "products" Grid.