Skip to content

Commit 8768441

Browse files
committed
Sync with Kendo UI Professional
1 parent 18f364b commit 8768441

File tree

6 files changed

+598
-127
lines changed

6 files changed

+598
-127
lines changed

docs-aspnet/_config-mvc.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -680,6 +680,11 @@ defaults:
680680
path: "html-helpers/scheduling/scheduler"
681681
values:
682682
title_prefix: "ASP.NET MVC Scheduler Component"
683+
-
684+
scope:
685+
path: "html-helpers/template"
686+
values:
687+
title_prefix: "ASP.NET MVC Template Component"
683688

684689
# Aliases available in the markdown template. The below will expand {{site.foo}} to Bar in the output
685690
# "foo": "Bar"

docs-aspnet/_config.yml

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -675,8 +675,9 @@ navigation:
675675
title: "Validator"
676676
"*window":
677677
title: "Window"
678-
"*templates":
679-
title: "Templates"
678+
"*template":
679+
title: "Template"
680+
isNew: true
680681
"*switch":
681682
title: "Switch"
682683
"*splitbutton":
@@ -1247,6 +1248,11 @@ defaults:
12471248
path: "html-helpers/scheduling/scheduler"
12481249
values:
12491250
title_prefix: "ASP.NET Core Scheduler Component"
1251+
-
1252+
scope:
1253+
path: "html-helpers/template"
1254+
values:
1255+
title_prefix: "ASP.NET Core Template Component"
12501256

12511257
type_links:
12521258
"kendo.Class": "/api/javascript/class"

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

Lines changed: 82 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Content Security Policy
33
page_title: Content Security Policy Troubleshooting
4-
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."
4+
description: "Learn more about the Content Security Policy (CSP) mode and how to work with it in Telerik UI for {{ site.framework }} controls."
55
slug: troubleshooting_content_security_policy_aspnetmvc
66
previous_url: /troubleshoot/troubleshooting-content-security-policy
77
position: 6
@@ -13,15 +13,15 @@ position: 6
1313

1414
If the strict CSP mode is enabled, some browser features are disabled by default:
1515

16-
* 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.
16+
* 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.
1717

1818
* Dynamic code evaluation through `eval()` and string arguments for both `setTimeout` and `setInterval` are blocked.
1919

2020
## (For R1 2023 SP1 and Later) Working with Telerik UI for {{ site.framework }} Components
2121

2222
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.
2323

24-
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.
24+
The rest of the Kendo UI components and internal mechanisms have been rewritten to discard the usage of the `eval()` and `new Function()` calls.
2525

2626
{% if site.core %}
2727

@@ -30,7 +30,7 @@ When Kendo UI components are initialized from HTML helpers or Tag Helpers, inlin
3030

3131
{% else %}
3232

33-
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.`
33+
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.`
3434

3535
{% endif %}
3636

@@ -43,7 +43,7 @@ To resolve the issue and prevent the components from being dependent on the `uns
4343

4444
{% if site.core %}
4545

46-
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.
46+
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.
4747

4848
{% else %}
4949

@@ -60,93 +60,124 @@ Call the method after all components declarations to serialize the deferred init
6060

6161
### Creating Content Security Policy Templates
6262

63-
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).
63+
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).
6464

65-
The example below demonstrates how to define a CSP-compatible [client detail template of a Grid]({% slug clientdetailtemplate_grid_aspnetcore %}).
65+
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 %}).
6666

67-
{% if site.core %}
6867
```HtmlHelper
69-
@(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Category>()
68+
@(Html.Kendo().Grid<ProductViewModel>()
7069
.Name("grid")
7170
.Columns(columns =>
7271
{
73-
columns.Bound(product => product.CategoryID);
74-
columns.Bound(product => product.CategoryName);
72+
columns.Bound(f => f.ProductID);
7573
})
74+
.ClientDetailTemplate(Html.Kendo().Template().AddComponent(detailGrid => detailGrid
75+
.Grid<CategoryViewModel>()
76+
.Name("grid_${data.ProductID}")
77+
.Columns(columns =>
78+
{
79+
columns.Bound(c => c.ProductID);
80+
columns.Bound(c => c.CategoryID);
81+
columns.Bound(p => p.CategoryName);
82+
})
83+
.Scrollable()
84+
.Pageable()
85+
.HtmlAttributes(new { style = "height:300px;" })
86+
.DataSource(dataSource => dataSource
87+
.Ajax()
88+
.PageSize(5)
89+
.Read(read => read.Action("CategoryDetails_Read", "Grid", new { productID = "${data.ProductID}" }))
90+
)
91+
))
7692
.Pageable()
77-
.ClientDetailTemplateHandler("clientDetailTemplateHandler")
93+
.Scrollable()
94+
.HtmlAttributes(new { style = "height:430px;" })
7895
.DataSource(dataSource => dataSource
7996
.Ajax()
8097
.PageSize(20)
81-
.Read(read => read.Action("Categories_Read", "Home"))
98+
.Read(read => read.Action("Products_Read", "Grid"))
8299
)
83100
)
84101
85102
@Html.Kendo().DeferredScriptFile()
86103
```
104+
{% if site.core %}
87105
```TagHelper
88106
@addTagHelper *, Kendo.Mvc
89107
90-
<kendo-grid name="grid" detail-template-handler="clientDetailTemplateHandler">
108+
@{
109+
var url = @Url.Action("CategoryDetails_Read", "Grid");
110+
}
111+
112+
<kendo-grid name="grid" height="430">
91113
<columns>
92-
<column field="CategoryID"/>
93-
<column field="CategoryName"/>
114+
<column field="ProductID"/>
94115
</columns>
95-
<pageable enabled="true"/>
116+
<grid-detail-template>
117+
<kendo-grid name="grid_${data.ProductID}" height="300">
118+
<columns>
119+
<column field="ProductID"/>
120+
<column field="CategoryID"/>
121+
<column field="CategoryName"/>
122+
</columns>
123+
<datasource type="DataSourceTagHelperType.Ajax" page-size="5">
124+
<schema data="Data" total="Total" errors="Errors">
125+
<model id="CategoryID">
126+
<fields>
127+
<field name="CategoryID" type="number" editable="false"></field>
128+
<field name="CategoryName" type="string"></field>
129+
<field name="ProductID" type="number"></field>
130+
</fields>
131+
</model>
132+
</schema>
133+
<transport>
134+
<read url="@Html.Raw(url+"?productID=${data.ProductID}")" />
135+
</transport>
136+
</datasource>
137+
<pageable enabled="true" />
138+
<scrollable enabled="true" />
139+
</kendo-grid>
140+
</grid-detail-template>
96141
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
97-
<schema>
98-
<model id="CategoryID">
142+
<schema data="Data" total="Total" errors="Errors">
143+
<model id="ProductID">
99144
<fields>
100-
<field name="CategoryID" type="number"></field>
101-
<field name="CategoryName" type="string"></field>
145+
<field name="ProductID" type="number"></field>
102146
</fields>
103147
</model>
104148
</schema>
105149
<transport>
106-
<read url="@Url.Action("Categories_Read","Home")"/>
150+
<read url="@Url.Action("Products_Read","Grid")"/>
107151
</transport>
108152
</datasource>
153+
<pageable enabled="true"/>
154+
<scrollable enabled="true" />
109155
</kendo-grid>
110-
```
111-
```scripts.js
112-
function clientDetailTemplateHandler(data) {
113-
return `<p>${data.CategoryDetails}</p>`
114-
}
115-
116-
```
117-
{% else %}
118-
```HtmlHelper
119-
@(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Category>()
120-
.Name("grid")
121-
.Columns(columns =>
122-
{
123-
columns.Bound(product => product.CategoryID);
124-
columns.Bound(product => product.CategoryName);
125-
})
126-
.Pageable()
127-
.ClientDetailTemplateHandler(clientDetailTemplateHandler)
128-
.DataSource(dataSource => dataSource
129-
.Ajax()
130-
.PageSize(20)
131-
.Read(read => read.Action("Categories_Read", "Home"))
132-
)
133-
)
134156
135157
@Html.Kendo().DeferredScriptFile()
136158
```
137159
{% endif %}
138-
```scripts.js
139-
function clientDetailTemplateHandler(data) {
140-
return `<p>${data.CategoryDetails}</p>`
160+
```GridController.cs
161+
public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
162+
{
163+
return Json(productsData.ToDataSourceResult(request));
141164
}
142165

166+
public ActionResult CategoryDetails_Read([DataSourceRequest] DataSourceRequest request, int productID)
167+
{
168+
return Json(categoriesData
169+
.Where(t => t.ProductID == productID)
170+
.ToDataSourceResult(request));
171+
}
143172
```
144173

145-
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.
174+
For a runnable example, refer to the [Template component integration with Grid demo](https://demos.telerik.com/{{ site.platform }}/template/integration-grid).
175+
176+
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.
146177

147178
## (Prior to R1 2023 SP1) Working with Telerik UI for {{ site.framework }} Components
148179

149-
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:
180+
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:
150181

151182
{% if site.core %}
152183

0 commit comments

Comments
 (0)