Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet/compatibility/json-serialization.md

@@ -39,6 +39,7 @@ There are three ways to configure JSON Serialization in ASP.NET Core 3:
 
 * The recommended approach is to use the default serialization that is delivered with ASP.NET Core. To configure it, locate the `ConfigureServices` method and update it by adding the code below.
 
+	```
     public void ConfigureServices(IServiceCollection services)
 	{
 		...
@@ -50,9 +51,11 @@ There are three ways to configure JSON Serialization in ASP.NET Core 3:
 		// Add the Kendo UI services to the services container.
 		services.AddKendo();
 	}
+	```
 
 * The first alternative approach is to maintain the property names casing globally, locate the `ConfigureServices` method and update it by adding the `using Newtonsoft.Json.Serialization;` line at the top.
 
+	```
 	...
 	  	using Newtonsoft.Json.Serialization;
 	...
@@ -68,9 +71,11 @@ There are three ways to configure JSON Serialization in ASP.NET Core 3:
 		// Add the Kendo UI services to the services container.
 		services.AddKendo();
 	}
+	```
 
 * The second alternative approach is to use the default Json serialization throughout the application and include the built-in `System.Text.Json.JsonSerializerOptions` in the controller action method response.
 
+	```
 	...
 		using System.Text.Json;
 	...
@@ -80,7 +85,8 @@ There are three ways to configure JSON Serialization in ASP.NET Core 3:
 
         DataSourceResult result =  orders.ToDataSourceResult(request);
         return Json(result, new JsonSerializerOptions() { PropertyNameCaseInsensitive = false });
-    }	
+    }
+	```
 
 ## See Also
 

docs/api/javascript/dataviz/ui/diagram.md

@@ -9324,7 +9324,7 @@ Whether the removal should be recorded in the undo-redo stack.
 
 ### resize
 
-Adjusts the diagram size to match the size of the container.
+Adjusts the diagram viewport to match the size of the container.
 
 #### Example - resize Diagram on window resize
 

docs/knowledge-base/datetimepicker-localization-modern-type.md

@@ -23,16 +23,56 @@ res_type: kb
 
 ## Description
 
-This sample demonstrates how to implement Dutch Culture and Localization for Kendo DateTimePicker in Modern ContentType.
+This sample demonstrates how to implement Globalization and Localization for Kendo DateTimePicker in Modern ContentType.
 
 ## Solution
 
-```dojo
-  
+The first step is to include the culture resource script for the given language:
+https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker/configuration/culture
+
+More info you can find here:
+https://docs.telerik.com/kendo-ui/framework/globalization/overview
+
+Setting the culture will localize values like Month names, Day names, Date formatting, etc. For the rest of the values like Today, Cancel, Now, you may use one of the Localization options below:
+
+### Option 1 (Recommended)
+
+Use kendo-messages. These resource files are community-driven and we appreciate our users contributing to them:
+https://github.com/telerik/kendo-ui-core/tree/master/src/messages
+
+More info you can find here:
+https://docs.telerik.com/kendo-ui/globalization/localization
+
+Here is a full sample:
+
+```dojo 
+    <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/cultures/kendo.culture.bg-BG.min.js"></script>
+    <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/messages/kendo.messages.bg-BG.min.js"></script>
+
+    <p>Modern Picker with Bulgarian Localization</p>
+
+    <input id="datetimepicker" />
+
+    <script>
+      kendo.culture("bg-BG");
+
+      var picker = $("#datetimepicker").kendoDateTimePicker({
+        componentType: "modern",
+      }).data().kendoDateTimePicker;
+    </script>
+``` 
+
+### Option 2
+
+This is a custom approach by modifying the values directly in the DOM elements using JavaScript:
+
+```dojo 
+    <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/cultures/kendo.culture.nl-NL.min.js">     </script>
+
     <p>Modern Picker with Dutch Localization</p>
-    
+
     <input id="datetimepicker" />
-    
+
     <script>
       kendo.culture("nl-NL");
 

docs/knowledge-base/scale-diagram-to-fit-container.md

@@ -0,0 +1,93 @@
+---
+title: Scale Diagram to Fit Container upon Resizing
+description: An example on how to scale Kendo UI Diagram to fit its container upon resizing
+type: how-to
+page_title: Scale Diagram to Fit its Container upon Resizing | Kendo UI Diagram for jQuery
+slug: scale-diagram-to-fit-container-upon-resizing
+tags: diagram, scale, resize
+ticketid: 1492478
+res_type: kb
+---
+
+## Environment
+
+<table>
+	<tr>
+		<td>Product</td>
+		<td>Progress Kendo UI Diagram</td>
+	</tr>
+</table>
+
+
+## Description
+
+How can I scale Kendo UI Diagram to fit its container upon resizing?
+
+## Solution
+
+Create a method to dynamically calculate the Diagram viewport dimensions and scale the Diagram accordingly. Use the [`scale()`](/api/javascript/dataviz/ui/diagram/methods/scale) method of the Diagram.
+
+```dojo
+<div class="diagram-wrapper">
+      <div id="diagram"></div>
+</div
+    <script>
+      $("#diagram").kendoDiagram({
+        shapes:[
+          {
+            id:"1",
+            content:{
+              text: "State 1"
+            },
+            x: 20,
+            y: 20
+          },
+          {
+            id:"2",
+            content: {
+              text: "State 2"
+            },
+            x: 650,
+            y: 20
+          }
+        ],
+        connections:[
+          {
+            from: "1",
+            to: "2"
+          }
+        ]
+      });
+
+      function ResizeDiagram() {
+        var diagram = $("#diagram").data("kendoDiagram"); //get instance of the Diagram
+        var boundingbox = diagram.boundingBox();
+        var viewport = diagram.viewport();
+
+        var vpW = viewport.width; //get Diagram viewport width
+        var vpH = viewport.height; //get Diagram viewport height
+        var bbW = boundingbox.width; //get Diagram boundingbox width
+        var bbH = boundingbox.height; //get Diagram boundingbox height
+
+        var ratioW = vpW / bbW;
+        var ratioH = vpH / bbH;
+        
+        //zoom Diagram based on width ratio and height ratio
+        if (ratioW < ratioH) {
+          diagram.zoom(ratioW * .95);
+        }
+        else {
+          diagram.zoom(ratioH * .95);
+        }
+      }
+
+      $(window).on("resize", function () {
+        ResizeDiagram();
+      });
+    </script>
+```
+## See Also
+
+* [Diagram Overview](https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/overview)
+* [Persist Shape Properties](https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/persist-shape-properties)
+* [Diagram Layout](https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/layout)