Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet/globalization/overview.md

@@ -13,27 +13,58 @@ Globalization is the process of designing and developing an application that wor
 
 It combines localization (the translation of component messages) with internationalization (their adaptation to a specific culture). Cultures require and define particular information for their number formats, week and month names, date and time formats, and so on.
 
+All Kendo UI widgets and their {{ site.framework }} server-side wrappers which support date or number formatting depend also on the [current culture](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/culture). Usually, such components are more complex (for example, the [Grid]({% slug globalization_grid_aspnetcore %}), [ListView]({% slug globalization_htmlhelpers_listview %}), [Charts]({% slug htmlhelpers_charts_aspnetcore %}), and so on).
+
+The following {{ site.product }} helpers depend on the [current culture](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/culture):
+
+* [Calendar]({% slug globalization_calendar_aspnetcore %})
+* [DateInput]({% slug globalization_dateinput_aspnetcore %})
+* [DatePicker]({% slug globalization_datepicker_aspnetcore %})
+* [TimePicker]({% slug globalization_timepicker_aspnetcore %})
+* [DateTimePicker]({% slug globalization_datetimepicker_aspnetcore %})
+* [NumericTextBox]({% slug globalization_numerictextbox_aspnetcore %})
+* [MaskedTextBox (globalized mask literals)]({% slug globalization_maskedtextbox_aspnetcore %})
+* [Scheduler]({% slug htmlhelpers_scheduler_aspnetcore %})
+* [Gantt]({% slug htmlhelpers_gantt_aspnetcore %})
+* [Grid]({% slug globalization_grid_aspnetcore %})
+* [Chart]({% slug htmlhelpers_charts_aspnetcore %})
+* [ListView]({% slug globalization_htmlhelpers_listview %})
+
 ## Applying Cultures
 
 To use a culture that is different from the default `en-US` one in {{ site.product }}:
 
-1. Copy the required culture JavaScript file from the `\js\culture\` folder of your {{ site.product }} installation to the {% if site.core %}`wwwroot/lib/kendo-ui/js/cultures/`{% else %}`~/Scripts/cultures/`{% endif %} folder of your application. This example uses the Spanish `es-ES` culture.
-1. Include the corresponding culture JavaScript file after the other JavaScript product files.
+1. Copy the required culture JavaScript file from the `\js\culture\` folder of your [{{ site.product }} installation]{% if site.core %}({% slug downloadinstall_aspnetcore %}){% else %}({% slug overview_downloadinstallation_mvc %}){% endif %} to the {% if site.core %}`wwwroot/lib/kendo-ui/js/cultures/`{% else %}`~/Scripts/cultures/`{% endif %} folder of your application. Alternatively, provide the culture files by using the [Kendo CDN service]{% if site.core %}({% slug cdnservices_core %}){% else %}({% slug cdnservices_aspnetmvc %}){% endif %}.
+
+1. Include the corresponding culture JavaScript file after the other JavaScript product files. This example uses the Spanish `es-ES` culture.
+
 
 {% if site.core %}
-    ```Razor
+    ```LocalFiles
         <script src="~/lib/jquery/dist/jquery.js"></script>
         <script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
         <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
         <script src="~/lib/kendo-ui/js/cultures/kendo.culture.es-ES.min.js"></script>
     ```
+    ```CDN
+        <script src="https://kendo.cdn.telerik.com/<version>/js/jquery.min.js"></script>
+        <script src="https://kendo.cdn.telerik.com/<version>/js/kendo.all.min.js"></script>
+        <script src="https://kendo.cdn.telerik.com/<version>/js/kendo.aspnetmvc.min.js"></script>
+        <script src="https://kendo.cdn.telerik.com/<version>/js/cultures/kendo.culture.es-ES.min.js"></script>
+    ```
 {% else %}
-    ```Razor
+    ```LocalFiles
         <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
         <script src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>
         <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
         <script src="@Url.Content("~/Scripts/cultures/kendo.culture.es-ES.min.js")"></script>
     ```
+    ```CDN
+        <script src="https://kendo.cdn.telerik.com/<version>/js/jquery.min.js"></script>
+        <script src="https://kendo.cdn.telerik.com/<version>/js/kendo.all.min.js"></script>
+        <script src="https://kendo.cdn.telerik.com/<version>/js/kendo.aspnetmvc.min.js"></script>
+        <script src="https://kendo.cdn.telerik.com/<version>/js/cultures/kendo.culture.es-ES.min.js"></script>
+    ```
 {% endif %}
 
 1. Set the current culture by calling the [`kendo.culture`](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/culture) method. You have to add the script block after the culture JavaScript file. As a result, all {{ site.product }} helpers will use the `es-ES` culture for parsing and formatting dates and numbers.

docs-aspnet/html-helpers/data-management/grid/grouping/aggregates.md

@@ -41,7 +41,7 @@ Aggregates can be used for the entire grid via:
 Or, to each individual group via: 
 
 * `ClientGroupFooterTemplate` of a `GridColumn` - a footer in the respective column that renders when the grid is grouped.
-* `ClientGroupHeaderTemplate` of a `GridColumn` - a header in the respective column that renders when the grid is grouped by that column. The `value` field in the context carries the current group value.
+* `ClientGroupHeaderColumnTemplate` of a `GridColumn` - a header in the respective column that renders when the grid is grouped by that column. The `value` field in the context carries the current group value.
 
 ## How to Enable Aggregates
 
@@ -51,7 +51,36 @@ To enable aggregates:
 1. Use the aggregate result in the templates that support it - their `context` is strongly typed and carries the aggregate values in the respective fields.
 1. Set the grid's `Groupable` property to `true`.
     * If you will be using only `FooterTemplate`s - grouping is not required.
-1. Group the grid to see the effect on group-specific templates
+1. Group the grid to see the effect on group-specific templates.
+
+
+    ```
+        @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
+            .Name("grid")
+            .Columns(columns =>
+            {
+                columns.Bound(p => p.ProductName)
+                    .ClientGroupFooterTemplate("Product: #=count#");        
+                columns.Bound(p => p.UnitPrice).Format("{0:C}")
+                    .ClientFooterTemplate("Total price: #=sum#");
+                columns.Bound(p => p.UnitsInStock)
+                    .ClientGroupHeaderColumnTemplate("Units In Stock: #= value # (Count: #= count#)")
+                    .ClientGroupFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");
+            })
+            .Groupable()
+            .Pageable()      
+            .DataSource(dataSource => dataSource
+                .Ajax()
+                .Aggregates(aggregates =>
+                {
+                    aggregates.Add(p => p.ProductName).Count();
+                    aggregates.Add(p => p.UnitPrice).Sum();
+                    aggregates.Add(p => p.UnitsInStock).Min().Max().Count();
+                })
+                .Read(read => read.Action("AllProducts", "Grid"))
+            )
+        )
+    ```
 
 * [Example Demo Grid with grouping and aggregates](https://demos.telerik.com/{{ site.platform }}/grid/aggregates)
 

docs-aspnet/html-helpers/data-management/grid/search-panel.md

@@ -25,7 +25,11 @@ To enable the search panel functionality, include the `Search` option to the too
 You can also customize which fields to search through the data when a value is entered in the search input.
 
     ...
-    .Search(s=> { s.Field(c => c.ContactName); })
+    .Search(s=> 
+    { 
+        s.Field(c => c.ContactName);
+        s.Field(c => c.CompanyName); 
+    })
 
 The code snippets from above can be seen in action in the following demo:
 

docs-aspnet/html-helpers/pdf/pdfviewer/pdfjs-processing.md

@@ -36,6 +36,10 @@ The following example demonstrates how to configure the PDFViewer to use PDF.js
     )
 ```
 
+For a complete example, refer to the following demo:
+
+* [PDFViewer PDFjs Processing Demo](https://demos.telerik.com/{{ site.platform }}/pdfviewer/index)
+
 ## Browser Support
 
 PDF.js processing is not supported in Internet Explorer 9. To work properly in that browser version, PDF.js requires additional configuration.

docs-aspnet/installation/getting-started-copy-client-resources.md

@@ -34,6 +34,9 @@ To include the client-side resources, use any of the following approaches:
 
    ![Kendo UI resources](../getting-started-core/images/kendo-ui-wwwroot.png)
 
+The culture and localization (the translation of component messages) scripts are included in the `js` folder. For more information on using localization, internationalization, and right-to-left (RTL) support with {{ site.product }} helpers, refer to the article on [globalization support by {{ site.product }}]({% slug overview_globalization_core %}).
+
+
 1. Register the UI styles and scripts in `~/Views/Shared/_Layout.cshtml`.
 
     > * The CDN links and/or package versions have to point to the same UI for ASP.NET Core version which your project references.

docs/backwards-compatibility/2021-backward-compatibility.md

@@ -10,26 +10,26 @@ position: 1
 
 This article lists the breaking or important changes in the 2021 releases of Kendo UI.
 
-## Kendo UI 2021 R3
+## Kendo UI 2021 R3 SP 1
+
+**ColorPicker**
+
+As of the end of 2021, the ColorPicker has a new design. As a result, some new features were introduced. If you prefer the old design of the widget, refer to [this section from our documentation](https://docs.telerik.com/kendo-ui/controls/editors/colorpicker/overview#old-design-of-the-colorpicker).
 
-> Important change
+## Kendo UI 2021 R3
 
 **MultiSelect**
 
 As of the 2021 R3 release the MultiSelect in virtualization scenario will no longer support `Shift` + `Arrow` key selection as it is described in the [Keyboard navigation demo](https://demos.telerik.com/kendo-ui/multiselect/keyboard-navigation). That is because when going from one virtual page of MultiSelect items to another the items indexes are reused. As the range selection functionality relies on indexes, executing it via the `Shift` + `Arrow` combination may result in improper selection in the widget. That is why it has been disabled for virtualized MultiSelect widgets.
 
 ## Kendo UI 2021 R2 SP1
 
-> Important change
-
 **TileLayout**
 
 The TileLayout container headers come with a new rendering. The TileLayout containers no longer render the header texts inside `<h5>` elements, but place them inside `<div>` elements.
 
 ## Kendo UI 2021 R2
 
-> Important change
-
 **Scheduler**
 
 As of the 2021 R2 release the events that are 24 hours or longer and do not have their `isAllDay` field set to `true` will be rendered in the regular (non all day) slots. In the previous versions such events were rendered in the allDaySlot. With the introduced change the `allDaySlot` will display only those events that have their `isAllDay` field set to `true`.

docs/controls/editors/colorpicker/contrast-tool.md

@@ -0,0 +1,66 @@
+---
+title: Contrast Tool
+page_title: ColorPicker Documentation | ColorPicker Contrast Tool
+description: "Check out the Contrast Tool in the ColorPicker."
+slug: contrast_tool_kendoui_colorpicker_widget
+position: 4
+---
+
+# Contrast Tool
+
+As of the end of 2021, the ColorPicker provides a Color Contrast Tool. It provides the option for checking the color contrast ratio between two colors. Color contrast between text and background is important on web pages. It affects some people’s ability to perceive the information. The tool follows the WCAG recommendations for web accessibility.
+
+According to the WCAG standard, there are two levels of contrast ratio:
+ * AA (minimum contrast)—The level AA requires a contrast ratio of at least 4.5:1 for normal text.
+ * AAA (enhanced contrast)—The level AAA requires a contrast ratio of at least 7:1 for normal text.
+
+The example below demonstrates how to enable the contrast tool in the ColorPicker:
+
+```dojo
+    <div class="demo-section">
+        <div class="column">
+            <h3 class="title"><label for="picker">Foreground Color</label></h3>
+            <input id="foreground-picker" />
+        </div>
+        <div class="column">
+            <h3 class="title"><label for="picker">Background Color</label></h3>
+            <input id="background-picker" />
+        </div>
+    </div>
+     <script>
+
+        $("#foreground-colorpicker").kendoColorPicker({
+            value: "#ffffff",
+            buttons: false,
+            contrastTool: {
+                backgroundColor: "#ffffff"
+            }
+        });
+        $("#background-colorpicker").kendoColorPicker({
+            value: "#ffffff",
+            input: false,
+            views: ["gradient"],
+            change: function (e) {
+                var foregroundPicker = $("#foreground-colorpicker").data("kendoColorPicker")
+                foregroundPicker.setBackgroundColor(e.sender.value())
+            }
+        });
+    </script>
+    <style>
+        .demo-section {
+            display: inline-flex;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .column {
+            margin:auto;
+            text-align: center;
+        }
+    </style>
+```
+
+## See Also
+
+* [Contrast Tool of the ColorPicker (Demo)](https://demos.telerik.com/kendo-ui/colorpicker/contrast-tool)
+* [JavaScript API Reference of the ColorPicker](/api/javascript/ui/colorpicker)

docs/controls/editors/colorpicker/overview.md

@@ -66,6 +66,21 @@ To display a custom list of colors in the ColorPicker, pass them in the `palette
         });
     </script>
 
+## Legacy ColorPicker Design
+
+As of the end of 2021, the ColorPicker has a new design. The configuration from the example below shows how to revert to the old design of the widget:
+
+```dojo
+    <input id="picker" />
+    <script>
+        $("#picker").kendoColorPicker({
+            input: false,
+            preview:false,
+            views: ["gradient"]
+        });
+    </script>
+```
+
 ## See Also
 
 * [Basic Usage of the ColorPicker (Demo)](https://demos.telerik.com/kendo-ui/colorpicker/index)

docs/controls/editors/colorpicker/rgb-hex-formats.md

@@ -0,0 +1,35 @@
+---
+title: RGB and HEX Formats
+page_title: jQuery ColorPicker Documentation | ColorPicker RGB and HEX Formats
+description: "Check out the RGB and HEX input formats in the ColorPicker."
+slug: rgb_hex_kendoui_colorpicker_widget
+position: 3
+---
+
+# RGB and HEX Input Formats
+
+As of the end of 2021, the ColorPicker supports both RGB and HEX formats as input through its [formats](/api/javascript/ui/colorpicker/configuration/formats) configuration. To choose the default format, you can use the [format](/api/javascript/ui/colorpicker/configuration/format) option:
+
+```dojo
+    <input id="rgb-picker" />
+    <input id="hex-picker" />
+
+    <script>
+        $("#rgb-picker").kendoColorPicker({
+            preview: false,
+            format: "rgb",
+            formats: ["rgb", "hex"]
+        });
+
+        $("#hex-picker").kendoColorPicker({
+            preview: false,
+            format: "hex",
+            formats: ["rgb", "hex"]
+        });
+    </script>
+```
+
+## See Also
+
+* [RGB and HEX formats of the ColorPicker (Demo)](https://demos.telerik.com/kendo-ui/colorpicker/rgb-hex)
+* [JavaScript API Reference of the ColorPicker](/api/javascript/ui/colorpicker)

docs/controls/editors/colorpicker/views.md

@@ -0,0 +1,34 @@
+---
+title: Views
+page_title: jQuery ColorPicker Documentation | ColorPicker Views
+description: "Review the available views in the ColorPicker."
+slug: views_kendoui_colorpicker_widget
+position: 2
+---
+
+# ColorPicker Views
+
+As of the end of 2021, the ColorPicker has a new design. One of the introduced new features is the [views](/api/javascript/ui/colorpicker/configuration/views) configuration. It allows you to choose between a `gradient` and a `palette` view. You can also choose which the default view would be through the [view](/api/javascript/ui/colorpicker/configuration/view) option.
+
+```dojo
+    <input id="palette-picker" />
+    <input id="gradient-picker" />
+    <script>
+        $("#palette-picker").kendoColorPicker({
+            preview: false,
+            view: "palette",
+            views: ["gradient", "palette"]
+        });
+
+        $("#gradient-picker").kendoColorPicker({
+            preview: false,
+            view: "gradient",
+            views: ["gradient", "palette"]
+        });
+    </script>
+```
+
+## See Also
+
+* [Views of the ColorPicker (Demo)](https://demos.telerik.com/kendo-ui/colorpicker/views)
+* [JavaScript API Reference of the ColorPicker](/api/javascript/ui/colorpicker)