Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/getting-started-core/razor-pages.md

@@ -17,14 +17,14 @@ The ASP.NET Razor Pages framework was introduced in ASP.NET Core 2.0 as an alter
 * The `@page` directive placed at the top of the page makes it a Razor Page. The page contains both HTML and server-side logic, which you include by using Razor syntax. 
 
 * The `@model` directive specifies the type of the data that the page is expected to work with. The page uses the PageModel class itself as a view model. The required data is exposed as properties.
-* The page handles requests directly, without using a controller. A naming convention is used to find the appropriate handler method to execute in the PageModel class. Handler methods are prefixed with the word `On` followed by the HTTP verb used for the request that they process: `OnGet`, `OnPost`, `OnGetAsync` and `OnPostAsync`. Following this convention, additional handlers can be included, for example `OnGetHelloWorld`.
+* The page handles requests directly, without using a controller. A naming convention is used to find the proper handler method to execute in the PageModel class. Handler methods are prefixed with the word `On` followed by the HTTP verb used for the request that they process: `OnGet`, `OnPost`, `OnGetAsync` and `OnPostAsync`. Following this convention, additional handlers can be included, for example `OnGetHelloWorld`.
 * Razor Pages automatically implement anti-forgery validation, which protects against cross-site request forgery (XSRF/CSRF) attacks.
 
 You can find more information on Razor Pages in the [Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/)
 
 ## Using Telerik UI for ASP.NET Core in a Razor Pages Project
 
-There are two alternative approaches for adding Telerik UI for ASP.NET Core to a new Razor Pages project:
+The two alternative approaches for adding Telerik UI for ASP.NET Core to a new Razor Pages project are:
 
 * Use the [Telerik Extensions for Visual Studio]({% slug newprojectwizards_visualstudio_aspnetcore %}) to create a new project. The [**GRID RAZOR PAGES**]({% slug newprojectwizards_visualstudio_aspnetcore %}#available-templates) template scaffolds a Razor Pages sample, which contains a Grid with enabled CRUD operations. The benefit of this approach is that the template will add the necessary configuration and dependencies automatically. You can focus on adding and configuring the UI components you need. 
 * Use the default Visual Studio <a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-6.0&tabs=visual-studio" target="_blank">**ASP.NET Core Web App**</a> template, which is based on the ASP.NET Razor Pages framework. Do not use the **Web Application (Model-View-Controller)** template.
@@ -48,6 +48,19 @@ All Telerik UI for ASP.NET Core components are compatible with the ASP.NET Razor
         @Html.AntiForgeryToken()
     ```
 
+1. Configure the JSON serialization options of the application in the `Program.cs` file. For more information, refer to the [JSON Serialization article]({% slug jsonserialization_core %}).
+
+    ```Program.cs
+
+        var builder = WebApplication.CreateBuilder(args);
+
+        // Add services to the container.
+        builder.Services.AddRazorPages().AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
+        builder.Services.AddKendo();
+        ...
+
+    ```
+
 1. Declare the Grid and setup the CRUD URLs in its `DataSource` configuration. Set the DataSource `Model.Id` configuration. The URL in these methods must refer to the name of the handler method in the `PageModel`:
 
 
@@ -304,7 +317,7 @@ Razor pages are automatically protected from [XSRF/CSRF](https://docs.microsoft.
 
 ## Known Limitations
 
-Razor Pages use `Page` in their routing mechanism which interferes with `GET` requests made by the Kendo UI DataSource. As a result, only `POST` requests should be used when paging is required.
+Razor Pages use `Page` in their routing mechanism which interferes with `GET` requests made by the Kendo UI DataSource. As a result, only `POST` requests must be used when paging is required.
 
 ## See Also
 

docs-aspnet/html-helpers/data-management/grid/context-menu.md

@@ -8,7 +8,7 @@ position: 15
 
 # Context Menu
 
-The {{site.product}} Grid provides a built-in ContextMenu to show the user available options, such as CRUD operations, selection and export options. A ContextMenu is shown when the user right-clicks on the Grid's table `body` or `head` elements.
+The {{site.product}} Grid provides a built-in ContextMenu to show the user available options, such as CRUD operations, selection and export options. The ContextMenu opens when the user right-clicks on the Grid's table `body` or `head` elements.
 
 By default, the Context Menu of the Telerik UI Grid for {{ site.framework }} is disabled.
 
@@ -118,7 +118,9 @@ The following example demonstrates how you can customize the Context Menu using
 
 ### Custom Commands
 
-You can also register custom commands for the Context Menu. The following example demonstrates how to implement a custom command:
+You can also register custom commands for the Context Menu. To add custom commands in the ContextMenu that opens when the user right-clicks on the Grid's table `body` element, use the `Body()` configuration. To add custom commands in the ContextMenu that opens when the user right-clicks on the Grid's table `header` element, use the `Head()` configuration.
+
+The following example demonstrates how to implement a custom command that appears in the table header ContextMenu.
 
 ```HtmlHelper
     @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
@@ -127,7 +129,7 @@ You can also register custom commands for the Context Menu. The following exampl
             .Head(head => {
                 head.Create();
                 head.Separator();
-                head.Custom("myTool").Text("My Tool).Icon("gear");
+                head.Custom("myTool").Text("My Custom Tool").Icon("gear"); // "myTool" is the name of the command that will be displayed as "My Custom Tool". 
             })
         ) 
         ...
@@ -140,7 +142,7 @@ You can also register custom commands for the Context Menu. The following exampl
         <head>
             <context-menu-item name="create"/>
             <context-menu-item name="separator"/>
-            <context-menu-item name="myTool" text="My Tool" icon="gear" command="myToolCommand"/>
+            <context-menu-item name="myTool" text="My Custom Tool" icon="gear" command="myToolCommand"/> <!-- "myTool" is the name of the command that will be displayed as "My Custom Tool". -->
         </head>
     </context-menu>
    </kendo-grid>

docs-aspnet/html-helpers/editors/editor/tools.md

@@ -48,6 +48,7 @@ The following example demonstrates the default tool methods of the Editor.
             .FontName()
             .FontSize()
             .ForeColor()
+            .FormatPainter()
             .BackColor()
             .Pdf()
             .Print()
@@ -152,6 +153,8 @@ The following example demonstrates the default tool methods of the Editor.
             </tool>
             <tool name="foreColor">
             </tool>
+            <tool name="formatPainter">
+            </tool>
             <tool name="backColor">
             </tool>
             <tool name="print">

docs-aspnet/html-helpers/layout/dialog/action-buttons.md

@@ -10,7 +10,48 @@ position: 3
 
 The Dialog action buttons allow you to provide specific interaction to users.
 
-Each button has a text and an action handler attached to it. Generally, each button closes the Dialog as its last action but you can cancel this from the custom action handler. The order of the values in the `Actions()` configuration method determines the order in which the action buttons are rendered in the Dialog. You can also define a button as `Primary(true)`.
+Each defined button has a text and an action handler attached to it. By default, the action buttons close the Dialog, but you can prevent the Dialog from closing by setting the respective action handler to return `false`.
+
+```HtmlHelper
+    @(Html.Kendo().Dialog()
+        .Name("dialog")
+        .Title("Software Update")
+        ...
+        {
+            actions.Add().Text("Ok");
+            actions.Add().Text("Cancel").Action("onCancel");
+        })
+    )
+
+    <script type="text/javascript">
+        function onCancel(e) {
+            alert("Cancel action was clicked");
+            return false; // Returning false will prevent the closing of the Dialog.
+        }
+    </script>
+```
+{% if site.core %}
+```TagHelper
+  <kendo-dialog name="dialog" title="Software Update">
+        <actions>
+            <action text="Ok">
+            </action>
+            <action text="Cancel" action="onCancel">
+            </action>
+        </actions>
+        <!-- Other configuration -->
+    </kendo-dialog>
+
+    <script type="text/javascript">
+        function onCancel(e) {
+            alert("Cancel action was clicked");
+            return false; // Returning false will prevent the closing of the Dialog.
+        }
+    </script>
+```
+{% endif %}
+
+The order of the values in the `Actions()` configuration method determines the order in which the action buttons are rendered in the Dialog. You can also define a button as `Primary(true)`.
 
 The following example demonstrates how to set three action buttons in a Dialog with a `stretched` layout. The last button has an `Action()` event handler attached and is set as `Primary(true)`.
 

docs-aspnet/html-helpers/layout/form/validation.md

@@ -252,7 +252,7 @@ The following example demonstrates custom validation of the `LastName` and `Reti
     }
 ```
 
-## Custom Validation
+## DataAnnotation Attributes
 
 The Form component supports DataAnnotation attributes and will configure the editors and the built-in validation based on the DataAnnotation attributes set for the model properties. The following table summarizes the supported DataAnnotation attributes:
 

docs-aspnet/html-helpers/layout/window/use-iframe.md

@@ -8,10 +8,10 @@ position: 6
 
 # Using iframe
 
-You can force the Window to display its content in an `<iframe>` element by using the `Iframe(true)` configuration method.
+You can force the Window to display its content in an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) element by using the `Iframe(true)` configuration method. In this case, the Window content will be loaded into an HTML page that is embedded into the current HTML page. 
 
-> * Loading HTML fragments (partial content) inside an `iframe` is not correct. iframe pages have to include a `DOCTYPE`, `html`, `head`, and `body` tags, just like a standard web page does.
-> * Avoid using iframes on iOS devices because they are not scrollable and always expand to match the content.
+> * Loading HTML fragments (partial content) inside an `iframe` is not correct. Like standard web pages, `iframe` pages have to include a `DOCTYPE`, `html`, `head`, and `body` tags.
+> * Avoid using an `iframe` on iOS devices because iOS devices do not support `iframe` scrolling and always expand to match the content.
 
 The following example demonstrates how to access the `window` and `document` objects inside the `iframe`. To achieve this, the nested page has to belong to the same domain as the main page. The `iframe` is accessed through the `element` of the Window.
 

docs-aspnet/installation/nuget-install.md

@@ -11,7 +11,7 @@ position: 3
 
 This article describes how to configure your system for the Telerik NuGet source and then use it to install {{ site.product }} in your project.
 
-[NuGet](https://www.nuget.org) is a popular .NET package manager. Telerik maintains a private NuGet feed with official {{ site.product }} releases and service packs. In the Telerik NuGet feed, you will see packages that your account has a license for; trials (active) and commerical (active and expired).
+[NuGet](https://www.nuget.org) is a popular .NET package manager. Telerik maintains a private NuGet feed with official {{ site.product }} releases and service packs. In the Telerik NuGet feed, you will see packages that your account has a license for; trials (active) and commercial (active and expired).
 
 {% if site.core %}
 >tip Looking for a complete tutorial? Check out the [Getting Started guide that uses NuGet]({%slug gettingstarted_aspnetmvc6_aspnetmvc%}) to add Telerik UI to the project.
@@ -21,7 +21,9 @@ This article describes how to configure your system for the Telerik NuGet source
 
 ## Setting Up the Telerik NuGet Feed
 
-The Telerik NuGet feed allows you instant access to various Telerik and Kendo packages that you can install in your project. Before you can use the Telerik NuGet Feed as a **Package source**, you must configure your machine by utilizing any of the following methods:
+The Telerik NuGet feed allows you instant access to various Telerik and Kendo packages that you can install in your project. You can access either the latest or older versions of the suites.
+
+Before you can use the Telerik NuGet Feed as a **Package source**, you must configure your machine by utilizing any of the following methods:
 
 * [Use the NuGet Package Manager in Visual Studio](#setup-with-the-nuget-package-manager).
 

docs-aspnet/styles-and-layout/sass-themes/compatibility.md

@@ -12,6 +12,7 @@ The following table lists the Telerik UI for {{ site.framework }} versions and t
 
 | Telerik UI for {{ site.framework }} | Kendo UI Sass Themes |
 |:---         |:---                     |
+| Telerik UI 2024.1.319 (2024.1.319) | @progress/kendo-theme-bootstrap@7.2.1<br>@progress/kendo-theme-classic@7.2.1<br>@progress/kendo-theme-default@7.2.1<br>@progress/kendo-theme-fluent@7.2.1<br>@progress/kendo-theme-material@7.2.1 |
 | Telerik UI 2024.1.130 (Q1 2024.1.130) | @progress/kendo-theme-bootstrap@7.2.0<br>@progress/kendo-theme-classic@7.2.0<br>@progress/kendo-theme-default@7.2.0<br>@progress/kendo-theme-fluent@7.2.0<br>@progress/kendo-theme-material@7.2.0 |
 | Telerik UI 2023.3.1114 (R3 2023 SP1) | @progress/kendo-theme-bootstrap@7.0.2<br>@progress/kendo-theme-classic@7.0.2<br>@progress/kendo-theme-default@7.0.2<br>@progress/kendo-theme-fluent@7.0.2<br>@progress/kendo-theme-material@7.0.2 |
 | Telerik UI 2023.3.1010 (R3 2023) | @progress/kendo-theme-bootstrap@7.0.1<br>@progress/kendo-theme-classic@7.0.1<br>@progress/kendo-theme-default@7.0.1<br>@progress/kendo-theme-fluent@7.0.1<br>@progress/kendo-theme-material@7.0.1 |

docs/api/javascript/ui/editor.md

@@ -4727,6 +4727,25 @@ Defines text for search box placeholder.
     });
     </script>
 
+### formattingMarksRefreshDelay `Number|Boolean` *(default: 250)*
+
+The delay in milliseconds before the formatting marks are refreshed. This feature is useful for performance optimization as the formatting marks are re-rendered any time the user presses a key. If the user is typing very fast or holding down a key, the delay will prevent the re-rendering from being executed multiple times.
+
+The visual effect from this configuration is that the marks will briefly disappear while the user is typing. You can set the value to `false` to fully turn off this behavior.
+
+#### Example
+
+    <textarea id="editor"><p>Some text with several spaces that demonstrates<br /> the re-rendering of the marks.</p></textarea>
+
+    <script>
+        $(document).ready(function() {
+            $("#editor").kendoEditor({
+                tools: ["formattingMarks"],
+                formattingMarksRefreshDelay: false
+            });
+        });
+    </script>
+
 ### unsafeInline `Boolean` *(default: true)*
 
 When set to false, the decoration applied by the Formatting tool dropdown will be skipped and the values will appear as plain text options.

docs/api/javascript/ui/grid.md

@@ -11244,9 +11244,9 @@ Hides the specified grid column.
 
 #### Parameters
 
-##### column `Number|String|Object`
+##### column `Number|String|Object|Array`
 
-The index of the column, or the [field](/api/javascript/ui/grid/configuration/columns.field) to which the columns is bound, or the column object obtained from the [columns](/api/javascript/ui/grid/fields/columns) collection.
+The index of the column, or the [field](/api/javascript/ui/grid/configuration/columns.field) to which the columns is bound, or the column object obtained from the [columns](/api/javascript/ui/grid/fields/columns) collection, or array of indexes, or array of fields, or array of column objects obtained from the collection of columns, or array of mixed values.
 
 When using multicolumn headers, using an index will hide a top-level column together with all its "child columns". In such scenarios, using field names or column objects may be more appropriate.
 
@@ -11257,7 +11257,7 @@ When using multicolumn headers, using an index will hide a top-level column toge
     $("#grid").kendoGrid({
       columns: [
         { field: "name" },
-        { field: "age" }
+        { field: "age" },
       ],
       dataSource: [
           { name: "Jane Doe", age: 30 },
@@ -11309,6 +11309,25 @@ When using multicolumn headers, using an index will hide a top-level column toge
     grid.hideColumn(grid.columns[0].columns[1]);
     </script>
 
+#### Example - hide a column by array of mixed values
+
+    <div id="grid"></div>
+    <script>
+    $("#grid").kendoGrid({
+      columns: [
+        { field: "name" },
+        { field: "age" },
+        { field: "height" }
+      ],
+      dataSource: [
+          { name: "Jane Doe", age: 30, height: 1.75 },
+          { name: "John Doe", age: 33, height: 1.82 }
+      ]
+    });
+    var grid = $("#grid").data("kendoGrid");
+    grid.hideColumn([0, 'age']);
+    </script>
+
 ### items
 
 Obtains an Array of the DOM elements, which correspond to the data items from the Kendo UI DataSource [view](/api/javascript/data/datasource/methods/view) (e.g. the ones on the current page).
@@ -11979,9 +11998,9 @@ Shows the specified column.
 
 #### Parameters
 
-##### column `Number|String|Object`
+##### column `Number|String|Object|Array`
 
-The index of the column, or the [field](/api/javascript/ui/grid/configuration/columns.field) to which the columns is bound, or the column object obtained from the [columns](/api/javascript/ui/grid/fields/columns) collection.
+The index of the column, or the [field](/api/javascript/ui/grid/configuration/columns.field) to which the columns is bound, or the column object obtained from the [columns](/api/javascript/ui/grid/fields/columns) collection, or array of indexes, or array of fields, or array of column objects obtained from the collection of columns, or array of mixed values.
 
 When using multicolumn headers, using an index will hide a top-level column together with all its "child columns". In such scenarios, using field names or column objects may be more appropriate.
 
@@ -12044,6 +12063,26 @@ When using multicolumn headers, using an index will hide a top-level column toge
     grid.hideColumn(grid.columns[0].columns[1]);
     </script>
 
+#### Example - show a hidden columns by array of mixed values
+
+    <div id="grid"></div>
+    <script>
+    $("#grid").kendoGrid({
+      columns: [
+        { field: "name", hidden: true },
+        { field: "age", hidden: true },
+        { field: "height" }
+      ],
+      dataSource: [
+          { name: "Jane Doe", age: 30, height: 1.75 },
+          { name: "John Doe", age: 33, height: 1.78 }
+      ]
+    });
+    var grid = $("#grid").data("kendoGrid");
+    grid.showColumn([1, "age"]);
+    </script>
+
+
 ### stickColumn
 
 Sticks a column.