Sync with Kendo UI Professional

docs-aspnet/_config-mvc.yml

@@ -680,6 +680,11 @@ defaults:
         path: "html-helpers/scheduling/scheduler"
     values:
         title_prefix: "ASP.NET MVC Scheduler Component"
+-   
+    scope:
+        path: "html-helpers/template"
+    values:
+        title_prefix: "ASP.NET MVC Template Component"
 
 # Aliases available in the markdown template. The below will expand {{site.foo}} to Bar in the output
 # "foo": "Bar"

docs-aspnet/_config.yml

@@ -675,8 +675,9 @@ navigation:
         title: "Validator"
      "*window":
         title: "Window"
-     "*templates":
-        title: "Templates"
+     "*template":
+        title: "Template"
+        isNew: true
      "*switch":
         title: "Switch"
      "*splitbutton":
@@ -1247,6 +1248,11 @@ defaults:
         path: "html-helpers/scheduling/scheduler"
     values:
         title_prefix: "ASP.NET Core Scheduler Component"
+-
+    scope:
+        path: "html-helpers/template"
+    values:
+        title_prefix: "ASP.NET Core Template Component"
 
 type_links:
     "kendo.Class": "/api/javascript/class"

docs-aspnet/html-helpers/helper-basics/content-security-policy.md

@@ -1,7 +1,7 @@
 ---
 title: Content Security Policy
 page_title: Content Security Policy Troubleshooting
-description: "Learn about the issues that may occur when using the strict Content Security Policy with UI for ASP.NET Core HTML helpers and Tag Helpers."
+description: "Learn more about the Content Security Policy (CSP) mode and how to work with it in Telerik UI for {{ site.framework }} controls."
 slug: troubleshooting_content_security_policy_aspnetmvc
 previous_url: /troubleshoot/troubleshooting-content-security-policy
 position: 6
@@ -13,15 +13,15 @@ position: 6
 
 If the strict CSP mode is enabled, some browser features are disabled by default:
 
-* Inline JavaScript, such as `<script></script>`, or DOM event attributes, such as `onclick`, are blocked. All script code must reside in separate files that are served from a white-listed domain.
+* Inline JavaScript, such as `<script></script>`, or DOM event attributes, such as `onclick`, are blocked. All script code must live in separate files that are served from the allow-listed domain.
 
 * Dynamic code evaluation through `eval()` and string arguments for both `setTimeout` and `setInterval` are blocked.
 
 ## (For R1 2023 SP1 and Later) Working with Telerik UI for {{ site.framework }} Components
 
 As of R1 2023 release, the Kendo UI scripts address the `unsafe-eval` directive for all components except for the [Spreadsheet](https://docs.telerik.com/kendo-ui/controls/spreadsheet/overview). For the bigger part of its core engine, the Kendo UI for jQuery Spreadsheet uses the `Function` evaluation, and rewriting the logic of the component will lead to a great number of breaking changes.
 
-The rest of the Kendo UI components and internal mechanisms have been completely rewritten to discard the usage of the `eval()` and `new Function()` calls.
+The rest of the Kendo UI components and internal mechanisms have been rewritten to discard the usage of the `eval()` and `new Function()` calls.
 
 {% if site.core %}
 
@@ -30,7 +30,7 @@ When Kendo UI components are initialized from HTML helpers or Tag Helpers, inlin
 
 {% else %}
 
-When Kendo UI components are initialized from HTML helpers there are inline scripts that are generated automatically after each component HTML markup. When the CSP is enabled, you will get the following error: `Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self' https://kendo.cdn.telerik.com.`
+When Kendo UI components are initialized from HTML helpers, inline scripts are generated automatically after each component HTML markup. When the CSP is enabled, you will get the following error: `Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self' https://kendo.cdn.telerik.com.`
 
 {% endif %}
 
@@ -43,7 +43,7 @@ To resolve the issue and prevent the components from being dependent on the `uns
 
 {% if site.core %}
 
-The `DeferredScriptFile` method simulates loading the initialization scripts as a `JS` file through middleware to ensure strict CSP compliance. You can either use the [global deferred initialization functionality]({% slug fundamentals_core%}#deferring-components-globally) to configure all Telerik UI for ASP.NET Core components as deferred globally or [defer each component separately]({% slug fundamentals_core%}#deferring-specific-components) by using the `Deferred` method.
+The `DeferredScriptFile` method simulates loading the initialization scripts as a `JS` file through `middleware` to ensure strict CSP compliance. You can either use the [global deferred initialization functionality]({% slug fundamentals_core%}#deferring-components-globally) to configure all Telerik UI for ASP.NET Core components as deferred globally or [defer each component separately]({% slug fundamentals_core%}#deferring-specific-components) by using the `Deferred` method.
 
 {% else %}
 
@@ -60,93 +60,124 @@ Call the method after all components declarations to serialize the deferred init
 
 ### Creating Content Security Policy Templates
 
-Most of the components support templating options, which use the [Kendo UI Templates syntax](https://docs.telerik.com/kendo-ui/framework/templates/overview), for example, [Grid templates]({% slug htmlhelpers_grid_aspnetcore_templates_overview %}), [DropDownList templates]({% slug htmlhelpers_dropdownlist_templates_aspnetcore %}), and more. To avoid using the [inline](https://docs.telerik.com/kendo-ui/framework/templates/get-started-inline) and [external](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external) Kendo UI templates and remove the `unsafe-eval` keyword from the `meta` tag of your Telerik UI for {{ site.framework }} application, you can define functional templates. For more information on the CSP-compatible templates, [refer to the CSP-compatible templates section]({% slug client_templates_overview %}#content-security-policy-csp-templates).
+Most of the components support templating options, which use the [Kendo UI Templates syntax](https://docs.telerik.com/kendo-ui/framework/templates/overview), for example, [Grid templates]({% slug htmlhelpers_grid_aspnetcore_templates_overview %}), [DropDownList templates]({% slug htmlhelpers_dropdownlist_templates_aspnetcore %}), and more. To remove the `unsafe-eval` keyword from the `meta` tag of your Telerik UI for {{ site.framework }} application, you must convert the client templates of all components into CSP-compatible templates. For more information on the CSP-compatible templates, [refer to the CSP-compatible templates section]({% slug client_templates_overview %}#content-security-policy-csp-templates).
 
-The example below demonstrates how to define a CSP-compatible [client detail template of a Grid]({% slug clientdetailtemplate_grid_aspnetcore %}).
+The example below demonstrates how to use the [Template component]({% slug htmlhelpers_overview_template %}) to define a CSP-compatible [client detail template of a Grid]({% slug clientdetailtemplate_grid_aspnetcore %}).
 
-{% if site.core %}
 ```HtmlHelper
-    @(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Category>()
+    @(Html.Kendo().Grid<ProductViewModel>()
         .Name("grid")
         .Columns(columns =>
         {
-            columns.Bound(product => product.CategoryID);
-            columns.Bound(product => product.CategoryName);
+            columns.Bound(f => f.ProductID);
         })
+        .ClientDetailTemplate(Html.Kendo().Template().AddComponent(detailGrid => detailGrid
+            .Grid<CategoryViewModel>()
+                .Name("grid_${data.ProductID}")
+                .Columns(columns =>
+                {
+                    columns.Bound(c => c.ProductID);
+                    columns.Bound(c => c.CategoryID);
+                    columns.Bound(p => p.CategoryName);
+                })
+                .Scrollable()
+                .Pageable()
+                .HtmlAttributes(new { style = "height:300px;" })
+                .DataSource(dataSource => dataSource
+                    .Ajax()
+                    .PageSize(5)
+                    .Read(read => read.Action("CategoryDetails_Read", "Grid", new { productID = "${data.ProductID}" }))
+                )
+        ))
         .Pageable()
-        .ClientDetailTemplateHandler("clientDetailTemplateHandler")
+        .Scrollable()
+        .HtmlAttributes(new { style = "height:430px;" })
         .DataSource(dataSource => dataSource
             .Ajax()
             .PageSize(20)
-            .Read(read => read.Action("Categories_Read", "Home"))
+            .Read(read => read.Action("Products_Read", "Grid"))
         )
     )
 
     @Html.Kendo().DeferredScriptFile()
 ```
+{% if site.core %}
 ```TagHelper
     @addTagHelper *, Kendo.Mvc
 
-    <kendo-grid name="grid" detail-template-handler="clientDetailTemplateHandler">
+    @{
+        var url = @Url.Action("CategoryDetails_Read", "Grid");
+    }
+
+    <kendo-grid name="grid" height="430">
         <columns>
-            <column field="CategoryID"/>
-            <column field="CategoryName"/>
+            <column field="ProductID"/>
         </columns>
-        <pageable enabled="true"/>
+        <grid-detail-template>
+            <kendo-grid name="grid_${data.ProductID}" height="300">
+                <columns>
+                    <column field="ProductID"/>
+                    <column field="CategoryID"/>
+                    <column field="CategoryName"/>
+                </columns>
+                <datasource type="DataSourceTagHelperType.Ajax" page-size="5">
+                    <schema data="Data" total="Total" errors="Errors">
+                        <model id="CategoryID">
+                            <fields>
+                                <field name="CategoryID" type="number" editable="false"></field>
+                                <field name="CategoryName" type="string"></field>
+                                <field name="ProductID" type="number"></field>
+                            </fields>
+                        </model>
+                    </schema>
+                    <transport>
+                        <read url="@Html.Raw(url+"?productID=${data.ProductID}")" />
+                    </transport>
+                </datasource>
+                <pageable enabled="true" />
+                <scrollable enabled="true" />
+            </kendo-grid>
+        </grid-detail-template>
         <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
-            <schema>
-                <model id="CategoryID">
+            <schema data="Data" total="Total" errors="Errors">
+                <model id="ProductID">
                     <fields>
-                        <field name="CategoryID" type="number"></field>
-                        <field name="CategoryName" type="string"></field>
+                        <field name="ProductID" type="number"></field>
                     </fields>
                 </model>
             </schema>
             <transport>
-                <read url="@Url.Action("Categories_Read","Home")"/>
+                <read url="@Url.Action("Products_Read","Grid")"/>
             </transport>
         </datasource>
+        <pageable enabled="true"/>
+        <scrollable enabled="true" />
     </kendo-grid>
-```
-```scripts.js
-    function clientDetailTemplateHandler(data) {
-        return `<p>${data.CategoryDetails}</p>`
-    }
-
-```
-{% else %}
-```HtmlHelper
-    @(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Category>()
-        .Name("grid")
-        .Columns(columns =>
-        {
-            columns.Bound(product => product.CategoryID);
-            columns.Bound(product => product.CategoryName);
-        })
-        .Pageable()
-        .ClientDetailTemplateHandler(clientDetailTemplateHandler)
-        .DataSource(dataSource => dataSource
-            .Ajax()
-            .PageSize(20)
-            .Read(read => read.Action("Categories_Read", "Home"))
-        )
-    )
 
     @Html.Kendo().DeferredScriptFile()
 ```
 {% endif %}
-```scripts.js
-    function clientDetailTemplateHandler(data) {
-        return `<p>${data.CategoryDetails}</p>`
+```GridController.cs
+    public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
+    {
+        return Json(productsData.ToDataSourceResult(request));
     }
 
+    public ActionResult CategoryDetails_Read([DataSourceRequest] DataSourceRequest request, int productID)
+    {
+        return Json(categoriesData
+            .Where(t => t.ProductID == productID)
+            .ToDataSourceResult(request));
+    }
 ```
 
-The engine for the [inline](https://docs.telerik.com/kendo-ui/framework/templates/get-started-inline) and [external](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external) templates will remain available. However, if you are using the previous template syntax, you must include the `usafe-eval` directive in the `meta` tag.
+For a runnable example, refer to the [Template component integration with Grid demo](https://demos.telerik.com/{{ site.platform }}/template/integration-grid).
+
+The engine for the Kendo UI [inline](https://docs.telerik.com/kendo-ui/framework/templates/get-started-inline) and [external](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external) templates will remain available. However, if you are using the previous template syntax, you must include the `usafe-eval` directive into the application `meta` tag.
 
 ## (Prior to R1 2023 SP1) Working with Telerik UI for {{ site.framework }} Components
 
-The Telerik UI for {{ site.framework }} releases prior to the R1 2023 SP1 one does not support the strict CSP mode. Thus, in these previous versions, if the Content Security Policy (CSP) is enabled, you could set the [`script-src` policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) as follows:
+The Telerik UI for {{ site.framework }} releases before the R1 2023 SP1 one does not support the strict CSP mode. Thus, in these previous versions, if the Content Security Policy (CSP) is enabled, you can set the [`script-src` policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) as follows:
 
 {% if site.core %}