Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/html-helpers/data-management/pivotgrid/overview.md

@@ -29,6 +29,8 @@ The PivotGrid represents multidimensional data in a cross-tabular format.
 * [Demo page for the PivotGrid TagHelper](https://demos.telerik.com/aspnet-core/pivotgrid/tag-helper)
 {% endif %}
 
+> The new PivotGridV2 is now available. It offers a brand new design and a new future-proof architecture that allows the implementation of many upcoming functionalities. As PivotGridV2 aims to replace the legacy PivotGrid, it is recommended to use the PivotGridV2 in your new projects. For information about the differences between the PivotGrid and PivotGridV2, refer to the [Comparison]({% slug htmlhelpers_pivotgridv2_aspnetcore_comparison %}) article.
+
 ## Basic Configuration
 
 To configure the PivotGrid for Ajax binding to an [Adventure Works](https://learn.microsoft.com/en-us/analysis-services/multidimensional-tutorial/multidimensional-modeling-adventure-works-tutorial?view=asallproducts-allversions) cube that is hosted on `https://demos.telerik.com/olap/msmdpump.dll`, follow the next steps:

docs/knowledge-base/chart-hide-navigator-during-export.md

@@ -113,8 +113,8 @@ To maintain the navigator settings after it was zoomed in or out:
             field: "Close"
           },
           select: {
-            from: "2009/02/05",
-            to: "2011/10/07"
+            from: "2021/02/05",
+            to: "2023/10/07"
           }
         }
       });

docs/knowledge-base/disable-drag-drop-specific-column-spreadsheet.md

@@ -0,0 +1,53 @@
+---
+title: Disabling Drag and Drop for a Specific Column in Spreadsheet
+description: Learn how to prevent drag and drop functionality for a specific column in the Kendo UI for jQuery Spreadsheet.
+type: how-to
+page_title: How to Disable Drag and Drop for Specific Columns in Kendo UI Spreadsheet
+slug: disable-drag-drop-specific-column-spreadsheet
+tags: kendo-ui, spreadsheet, drag-and-drop, disable-functionality
+res_type: kb
+ticketid: 1671669
+---
+
+## Environment
+
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>Progress® Kendo UI for jQuery® Spreadsheet</td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+In some cases, you may want to restrict the drag and drop functionality for a specific column in the Kendo UI for jQuery Spreadsheet. This is to prevent users from accidentally or intentionally modifying data in columns that should remain static.
+
+This knowledge base article also answers the following questions:
+- How can I disable auto-fill for a particular column in the Spreadsheet?
+- What approach should I take to prevent dragging of cells in a specified column?
+
+## Solution
+
+To disable drag and drop for a specific column in the Spreadsheet, handle the [changing](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/events/changing) event. Within the event handler, verify if the action is an auto-fill operation and if it originates from the column you wish to restrict. If both conditions are met, prevent the default behavior using `e.preventDefault()`. Below is an example that disables drag and drop for the second column (Column B).
+
+```javascript
+changing: function(e){
+    var range = e.range._sheet._autoFillOrigin;
+    // Check if the operation is auto-fill and if it originates from column B (index 1)
+    if(e.changeType == 'autoFill' && range.bottomRight.col == 1 && range.topLeft.col == 1) {
+        alert('Dragging column B is prevented');
+        e.preventDefault();
+    }              
+},
+```
+
+Implement this logic in your application to effectively disable drag and drop for the specified column. Ensure to attach this event handler correctly to your Spreadsheet instance.
+
+Explore a live example where dragging column B does not change the Spreadsheet's cell data: [Dojo example](https://dojo.telerik.com/kbqwNFgm).
+
+## See Also
+
+- [Spreadsheet Changing Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/events/changing)
+- [Kendo UI for jQuery Spreadsheet Overview](https://docs.telerik.com/kendo-ui/controls/spreadsheet/overview)

docs/knowledge-base/export-multiple-charts-in-the-same-pdf-file.md

@@ -231,8 +231,8 @@ How can I export many Charts in the same PDF file?
               field: "Close"
             },
             select: {
-              from: "2009/02/05",
-              to: "2011/10/07"
+              from: "2021/02/05",
+              to: "2023/10/07"
             }
           }
         });

docs/knowledge-base/how-to-display-chart-data-zoomed-to-last-30-days.md

@@ -181,12 +181,12 @@ For an interactive example using the [`Stock Chart`](https://docs.telerik.com/ke
                 field: "Close"
               },
               select: {
-                from: "2011/12/01",
-                to: "2011/12/31"
+                from: "2023/12/01",
+                to: "2023/12/31"
               },
               categoryAxis: {
-                max: "2011/12/31",
-                min: "2011/01/01"
+                max: "2023/12/31",
+                min: "2023/01/01"
               }
             }
           });

docs/knowledge-base/how-to-set-grid-cell-background-color-kendo-ui.md

@@ -0,0 +1,96 @@
+---
+title: Setting Cell Background Color in Kendo UI for jQuery Grid
+description: Learn how to dynamically set the background color of Grid cells based on data source fields in Kendo UI for jQuery Grid.
+type: how-to
+page_title: How to Set Grid Cell Background Color Based on Data Source Field - Kendo UI for jQuery
+slug: how-to-set-grid-cell-background-color-kendo-ui
+tags: kendo-ui, grid, background-color, jquery, datasource, cell, databound
+res_type: kb
+ticketid: 1671214
+---
+
+## Environment
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>Kendo UI for jQuery Grid</td>
+</tr>
+<tr>
+<td>Version</td>
+<td>2024.4.1112</td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+Setting the background color of cells in the Kendo UI for jQuery Grid based on a field from the dataSource is a common requirement. This knowledge base article demonstrates how to dynamically apply background colors to the entire cell using the values from the dataSource.
+
+This knowledge base article also answers the following questions:
+- How can I apply a background color to the entire Grid cell using dataSource field values?
+- How to use a dataSource field value for setting cell background color in Kendo UI for jQuery Grid?
+- What is the method to dynamically change Grid cell background based on dataItem in Kendo UI for jQuery?
+
+## Solution
+
+To dynamically set the background color of cells in a Kendo UI for jQuery Grid, utilize a combination of column templates and the `dataBound` event. Define a class in the template element and then, during the `dataBound` event, set the background color of the cell's parent element to match the desired color.
+
+### Setting Background Using Class and Parent Element
+
+1. Define a class in your column template. This class will be used to identify the cells whose background color needs to be changed.
+
+2. Use the `dataBound` event to identify these cells and set the background color of their parent elements.
+
+```javascript
+$("#grid").kendoGrid({
+  dataSource: dataSource,
+  dataBound: function(e){
+    $(".colorChange.pink").parent().css("background-color", "pink");
+    $(".colorChange.green").parent().css("background-color", "green");
+    $(".colorChange.yellow").parent().css("background-color", "yellow");
+  },
+  pageable: true,
+  toolbar: ["create"],
+  columns: [
+    { field: "ProductName", title: "Product Name" },
+    { field: "UnitPrice", title: "Price", format: "{0:c}", width: "120px" },
+    { 
+      field: "UnitsInStock",
+      title:"Units In Stock",
+      width: "120px",
+      template: "#{# <span style='background-color: #:Color#;' class='colorChange #:Color#'> #:UnitsInStock# </span> #}#"
+    },
+    { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }
+  ],
+  editable: "inline"
+});
+```
+
+To see setting the background using a class and parent element in action, refer to this [Progress Kendo UI Dojo](https://dojo.telerik.com/cIMtPIZe).
+
+### Dynamically Setting Background Based on DataSource Field
+
+To dynamically use a field from the dataSource as the background color:
+
+1. Add a class to your template item without specifying the background color inline.
+
+2. During the `dataBound` event, iterate through the dataSource items, retrieve the color value from the `Color` field, and apply it to the relevant cell.
+
+```javascript
+dataBound: function(e){   
+  var dataItems = e.sender.dataSource.view();
+  for (var j = 0; j < dataItems.length; j++) {
+    var color = dataItems[j].get("Color");
+    var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");
+    $(row).find(".colorChange").parent().css("background-color", color);
+  }   
+},
+```
+
+For a practical demonstration of dynamically setting the background with a dataSource field, refer to this [Progress Kendo UI Dojo](https://dojo.telerik.com/NfFWNtWO).
+
+## See Also
+- [Column Template in Kendo UI Grid](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.template)
+- [DataBound Event in Kendo UI Grid](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound)
+- [Styling Rows and Cells Based on Data Item Values](https://docs.telerik.com/kendo-ui/knowledge-base/style-rows-cells-based-on-data-item-values)

docs/knowledge-base/kendo-guid-error.md

@@ -0,0 +1,51 @@
+---
+title: Cannot read properties of undefined (reading 'getRandomValues')
+page_title: Cannot read properties of undefined (reading 'getRandomValues')
+description: "Learn how to resolve the error message about the getRandomValues method."
+slug: howto_resolve_getrandomvalues_message
+tags: telerik, kendo, jquery, guid, crypto, getRandomValues, grid, error, defined
+type: how-to
+res_type: kb
+---
+
+## Description
+
+I am getting the following error when I try to initialize a component or when I try to call the `kendo.guid()` method. Why?
+
+```
+Cannot read properties of undefined (reading 'getRandomValues')
+```
+
+## Solution
+
+Newer versions of Kendo UI for jQuery use the [`Crypto`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto) interface to generate cryptographically secure unique ids. This interface is available in the `window` object of all modern browsers.
+
+However, if you are working in an environment such as `jsdom`, it is possible that the `crypto` interface will not be available. In such cases, you can manually require it and assign it to the `window` object before you import the Kendo components.
+
+```javascript
+    window.crypto = require("crypto");
+```
+
+Alternatively, you could create a custom implementation of the `getRandomValues` method:
+
+```javascript
+ const crypto = {
+  getRandomValues: () => {
+    // Custom implementation that returns an array of 16 random integers.
+    // Using Math.random is not advisable. For more information read the note here:
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+    const get16RandomNumbers = myCustomFunctionThatGenerates16RandomIntegers();
+    return get16RandomNumbers;
+  }
+ };
+ 
+ window.crypto = crypto;
+```
+
+However, we'd strongly advise against doing that as this could compromise the randomness of the generated numbers.
+
+## See Also
+
+* [getRandomValues Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues)
+* [Crypto Interface](https://developer.mozilla.org/en-US/docs/Web/API/Crypto)
+* [Crypto Interface in JSDOM Discussion](https://github.com/jsdom/jsdom/issues/1612)

src/kendo.core.js

@@ -25,6 +25,7 @@ var packageMetadata = {
         isArray = Array.isArray,
         noop = $.noop,
         math = Math,
+        crypto = window.crypto,
         Template,
         JSON = window.JSON || {},
         support = {},
@@ -3218,20 +3219,20 @@ function pad(number, digits, end) {
         },
 
         guid: function() {
-            var id = "", i, random, chars = "abcdef";
-
-            id += chars[Math.floor(Math.random() * Math.floor(chars.length))];
-
-            for (i = 1; i < 32; i++) {
-                random = math.random() * 16 | 0;
-
-                if (i == 8 || i == 12 || i == 16 || i == 20) {
-                    id += "-";
-                }
-                id += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16);
+            try {
+                // This is available only in HTTPS.
+                return crypto.randomUUID();
+            } catch (e) {
+                // Use this as a fallback.
+                const randomValues = crypto.getRandomValues(new Uint8Array(16));
+                return randomValues.reduce((acc, curr, i) => {
+                    if (i === 4 || i === 6 || i === 8 || i === 10) {
+                        acc += "-";
+                    }
+                    acc += curr.toString(16).padStart(2, '0');
+                    return acc;
+                }, "");
             }
-
-            return id;
         },
 
         roleSelector: function(role) {