Sync with Kendo UI Professional

Author: kendo-bot

docs/intro/installation/nuget-install.md

@@ -86,6 +86,8 @@ Regardless of the package installation approach you choose, after the installati
 
 ![Kendo UI for jQuery Folder Structure](../../images/kendo-folder-structure.png)
 
+> The installation approach with the NuGet works only with .NET MVC projects that have the `Content` and `Scripts` folders. In a .NET Core(and newer) projects, the resources(scripts and styles) must be copied manually in the `wwwroot` folder.
+
 ### Install with the Package Manager Dialog
 
 To install the Kendo UI for jQuery packages by using the **Package Manager** dialog:  

docs/intro/widget-basics/create-custom-kendo-widget.md

@@ -37,9 +37,14 @@ Kendo UI provides options for you to create your own components by inheriting fr
     	        // The base call to initialize the component.
     	        Widget.fn.init.call(this, element, options);
 
+                // Add styling classes only for the updated components 
+                //$(element).parent().addClass("k-input-solid k-input-md k-rounded-md");
+
     	    }
     	});
 
+>Some components received new rendering improving their style options. This requires adding the styling classes for these components in the `init` function. [Here is a list](https://docs.telerik.com/kendo-ui/styles-and-layout/components-rendering-overview#updated-components) of the updated components.
+
 1. If you are extending a component, the call to the base is what translates your component from declarative initialization or the standard imperative initialization, and merges all the base options and custom options. Declare those options right under the `init` statement. Anything that you declare in the `options` object will be available for the user to pass as either a configuration value or as a `data` attribute.
 
     	var MyWidget = Widget.extend({

docs/knowledge-base/mvvm-pass-parameters-from-view-to-view-model-function.md

@@ -23,61 +23,61 @@ component: mvvm
 
 I am building a screen where, depending on the selected option from a DropDownList, specific controls will be visible.
 
-How can I use a single function that is defined in the `viewModel` to control the visibility of these elements? How can I pass a different argument to that function according to the actual HTML element it is used for?   
+How can I use a single function that is defined in the `viewModel` to control the visibility of these elements? How can I pass a different argument to that function according to the actual HTML element it is used for? 
 
 ## Solution
 
-Pass a single string argument as a function parameter. For example, if you need to pass an array, pass it as a string with a certain delimiter.
+Passing arguments as a function parameter is not valid.  If a value from the View-Model requires processing before displaying it in the View, a method should be created and used instead.
 
-````dojo
-<div>
-  <label for="selection">Selection: </label>
-  <input id="selection"
-         data-role="dropdownlist"
-         data-text-field="txt"
-         data-value-field="id"
-         data-bind="source: selectionDataSource,
-                    value: selectedOption"/>
-</div>
-<div data-bind="visible: visibleTextBox('1q3')">
-  <label for="amount">Textbox 1: </label>
-  <input id="amount"
-         data-role="numerictextbox"
-         data-bind="value: defaultTextBox1Value"/>
-</div>
-<div data-bind="visible: visibleTextBox('2q4')">
-  <label for="initialAmount">Textbox 2: </label>
-  <input id="initialAmount"
-         data-role="numerictextbox"
-         data-bind="value: defaultTextBox2Value"/>
-</div>
+>Bindings are not JavaScript code. Although bindings look like JavaScript code, they are not. The `<div data-bind="text: person.name.toLowerCase()"></div>` chunk of code is not a valid Kendo UI MVVM binding declaration. If a value from the View-Model requires processing before displaying it in the View, a method must be created and used instead. Note: Although the approach was working with older Kendo UI for jQuery versions, with the CSP compliance improvements introduced with the 2023 R1 release, the approach could not be used.
+
+In the following example a TextBox will be visible if `Seelction 1` or `Selection 2` option is selected from the DropDownList.
 
-<script>
-  var viewModel = kendo.observable({
-    selectionDataSource: new kendo.data.DataSource({
-      data: [
-        { txt: "Selection 1", id: 1 },
-        { txt: "Selection 2", id: 2 },
-        { txt: "Selection 3", id: 3 },
-        { txt: "Selection 4", id: 4 },
-      ]
-    }),
-    defaultTextBox1Value: function() { return 1; },
-    defaultTextBox2Value: function() { return 2; },
-    selectedOption: 1,
-    visibleTextBox: function(values) {
-      var valuesArray = values.split('q');
-      var currentSelectedOption = this.get('selectedOption');
+````dojo
+    <div>
+      <label for="selection">Selection: </label>
+      <input id="selection"
+             data-role="dropdownlist"
+             data-text-field="txt"
+             data-value-field="id"
+             data-bind="source: selectionDataSource,
+                        value: selectedOption"/>
+    </div>
+    <div data-bind="visible: visibleTextBox1">
+      <label for="amount">Textbox 1: </label>
+      <input id="amount"
+             data-role="numerictextbox"
+             data-bind="value: defaultTextBox1Value"/>
+    </div>
+    <div data-bind="visible: visibleTextBox2">
+      <label for="initialAmount">Textbox 2: </label>
+      <input id="initialAmount"
+             data-role="numerictextbox"
+             data-bind="value: defaultTextBox2Value"/>
+    </div>
 
-      if (valuesArray.includes(currentSelectedOption.toString())) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-  });
-  kendo.bind($("body"), viewModel);
-</script>
+    <script>
+      var viewModel = kendo.observable({
+        selectionDataSource: new kendo.data.DataSource({
+          data: [
+            { txt: "Selection 1", id: 1 },
+            { txt: "Selection 2", id: 2 },
+            { txt: "Selection 3", id: 3 },
+            { txt: "Selection 4", id: 4 },
+          ]
+        }),
+        defaultTextBox1Value: function() { return 1; },
+        defaultTextBox2Value: function() { return 2; },
+        selectedOption: 1,
+        visibleTextBox1: function () {
+          return this.get('selectedOption') === 1;
+        },
+        visibleTextBox2: function () {
+          return this.get('selectedOption') === 2;
+        }
+      });
+      kendo.bind($("body"), viewModel);
+    </script>
 ````
 
 ## See Also