Skip to content

Commit eca9661

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent e39034a commit eca9661

File tree

614 files changed

+9510
-9448
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

614 files changed

+9510
-9448
lines changed

‎docs-aspnet/html-helpers/data-management/grid/binding/signalr-binding.md‎

Lines changed: 291 additions & 221 deletions
Large diffs are not rendered by default.

‎docs-aspnet/html-helpers/layout/popover/templates.md‎

Lines changed: 97 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -12,89 +12,123 @@ The PopOver allows you to control the way its header and body sections are rende
1212

1313
## Header Template
1414

15-
To specify the layout of the header that will be displayed, use the `Header` method.
15+
To specify the layout of the header that will be displayed, use either the [`Header()`](/api/kendo.mvc.ui.fluent/popoverbuilder#headersystemstring) option, which accepts a string, or the [`HeaderHandler()`](/api/kendo.mvc.ui.fluent/popoverbuilder#headerhandlersystemstring) option, which returns the template content through a JavaScript function.
16+
17+
The following example demonstrates how to use the `HeaderHandler()` option to set the header of the PopOver based on the text content of the target element.
1618

1719
```HtmlHelper
18-
<span id="info" class="k-button wider">Hover me!</span>
19-
20-
@(Html.Kendo().Popover()
21-
.For("#info")
22-
.Position(PopOverPosition.Right)
23-
.ShowOn(PopoverShowOn.MouseEnter)
24-
.Header("<div class='custom-header' style='text-align: center'>PopOver header</div>")
25-
.Body("PopOver main content")
26-
)
20+
<ul id="products" class="dairy-photos">
21+
<li>
22+
<span data-id="1" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain.">Queso de Cabrales</span>
23+
</li>
24+
<li>
25+
<span data-id="2" title="A cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed.">Queso Manchego</span>
26+
</li>
27+
</ul>
28+
29+
@(Html.Kendo().Popover()
30+
.For("#products")
31+
.Filter("li")
32+
.Position(PopOverPosition.Right)
33+
.ShowOn(PopoverShowOn.MouseEnter)
34+
.HeaderHandler("getHeaderContnet")
35+
.Body("PopOver main content")
36+
)
2737
```
2838
{% if site.core %}
2939
```TagHelper
30-
<span id="info" class="k-button wider">Hover me!</span>
40+
@addTagHelper *, Kendo.Mvc
3141
32-
<kendo-popover for="#info" show-on="hover" position="right"
33-
header="<div class='custom-header' style='text-align: center'>PopOver header</div>"
34-
body="PopOver main content">
35-
</kendo-popover>
42+
<ul id="products" class="dairy-photos">
43+
<li>
44+
<span data-id="1" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain.">Queso de Cabrales</span>
45+
</li>
46+
<li>
47+
<span data-id="2" title="A cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed.">Queso Manchego</span>
48+
</li>
49+
</ul>
50+
51+
<kendo-popover for="#products" filter="li" show-on="mouseenter" position="right"
52+
header-handler="getHeaderContnet"
53+
body="PopOver main content">
54+
</kendo-popover>
3655
```
3756
{% endif %}
57+
```JS Scripts
58+
<script>
59+
function getHeaderContnet(e) {
60+
return `<b>${e.target.first().text()}</b>`;
61+
}
62+
</script>
63+
```
3864

3965
## Body Template
4066

41-
You can configure the body section through the `Body` method.
67+
You can configure the body section through the [`Body()`](/api/kendo.mvc.ui.fluent/popoverbuilder#bodysystemstring) or [`BodyHandler()`](/api/kendo.mvc.ui.fluent/popoverbuilder#bodyhandlersystemstring) configuration options.
68+
69+
When using the `Body()` option, you can specify the content directly as a string or use the [Template component]({% slug htmlhelpers_overview_template%}) to integrate other UI components or HTML elements.
70+
71+
If the PopOver body content must be dynamic (for example, based on a specified condition or other components and elements on the page), utilize the `BodyHandler()` method that accepts the name of a JavaScript function.
72+
73+
The following example shows how to use the `BodyHandler()` option to display an image and description in the body of the PopOver by using HTML attributes of the target element.
4274

4375
```HtmlHelper
44-
<ul id="products">
45-
<li>
46-
<a href="#" data-id="11" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain">
47-
Queso de Cabrales
48-
</a>
49-
</li>
50-
<li>
51-
<a href="#" data-id="12" title="A cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed">
52-
Queso<br />Manchego
53-
</a>
54-
</li>
55-
</ul>
56-
57-
@(Html.Kendo().Popover()
58-
.For("#products")
59-
.Filter("a")
60-
.Position(PopoverPosition.Bottom)
61-
.ShowOn(PopoverShowOn.MouseEnter)
62-
.Body("<div class=\"template-wrapper\"> + " +
63-
"<img src=" + @Url.Content("~/content/web/foods/200/") + "#=target.data().id#.jpg" + " alt=\"#=$(data.target).attr('title')#\" />" +
64-
"<p>#=$(data.target).attr('title')#</p></div>")
65-
.Width(400)
66-
.Height(200)
67-
)
76+
<ul id="products" class="dairy-photos">
77+
<li>
78+
<span data-id="1" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain.">
79+
<img alt="Telerik UI for ASP.NET Core Popover Queso de Cabrales" src="@Url.Content("~/content/web/foods/1.jpg")" />Queso de Cabrales
80+
</span>
81+
</li>
82+
<li>
83+
<span data-id="2" title="A cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed.">
84+
<img alt="Telerik UI for ASP.NET Core Popover Queso Manchego" src="@Url.Content("~/content/web/foods/2.jpg")" />Queso Manchego
85+
</span>
86+
</li>
87+
</ul>
88+
89+
@(Html.Kendo().Popover()
90+
.For("#products")
91+
.Filter("li")
92+
.Position(PopOverPosition.Right)
93+
.ShowOn(PopoverShowOn.MouseEnter)
94+
.BodyHandler("getBodyContent")
95+
)
6896
```
6997
{% if site.core %}
7098
```TagHelper
71-
<ul id="products">
72-
<li>
73-
<a href="#" data-id="11" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain">
74-
Queso de Cabrales
75-
</a>
76-
</li>
77-
<li>
78-
<a href="#" data-id="12" title="A cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed">
79-
Queso<br />Manchego
80-
</a>
81-
</li>
82-
</ul>
83-
84-
@{
85-
var bodyTemplate = "<div class=\"template-wrapper\"> + " +
86-
"<img src=" + @Url.Content("~/content/web/foods/200/") + "#=target.data().id#.jpg" + " alt=\"#=$(data.target).attr('title')#\" />" +
87-
"<p>#=$(data.target).attr('title')#</p></div>";
88-
}
99+
@addTagHelper *, Kendo.Mvc
89100
90-
<kendo-popover for="#products" filter="a" show-on="hover" position="bottom"
91-
body="@bodyTemplate"
92-
width="400"
93-
height="200">
94-
</kendo-popover>
101+
<ul id="products" class="dairy-photos">
102+
<li>
103+
<span data-id="1" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain.">
104+
<img alt="Telerik UI for ASP.NET Core Popover Queso de Cabrales" src="@Url.Content("~/content/web/foods/1.jpg")" />Queso de Cabrales
105+
</span>
106+
</li>
107+
<li>
108+
<span data-id="2" title="A cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed.">
109+
<img alt="Telerik UI for ASP.NET Core Popover Queso Manchego" src="@Url.Content("~/content/web/foods/2.jpg")" />Queso Manchego
110+
</span>
111+
</li>
112+
</ul>
113+
114+
<kendo-popover for="#products" filter="li" show-on="mouseenter" position="right"
115+
body-handler="getBodyContent">
116+
</kendo-popover>
95117
```
96118
{% endif %}
119+
```JS Scripts
120+
<script>
121+
function getBodyContent(data) {
122+
let imageTitle = $(data.target).find('span').attr('title');
123+
let imageName = $(data.target).find('span').attr('data-id');
124+
let imageURL = `@Url.Content("~/content/web/foods/")${imageName}.jpg`;
125+
return `<div class="template-wrapper"><img src="${imageURL}" alt="${imageTitle}" /><p>${imageTitle}</p></div>`;
126+
}
127+
</script>
128+
```
97129

98130
## See Also
99131

100132
* [Templates in the PopOver HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/popover/templates)
133+
* [Server-Side API of the PopOver HtmlHelper](/api/popover)
134+
{% if site.core %}* [Server-Side API of the PopOver TagHelper](/api/taghelpers/popover){% endif %}

0 commit comments

Comments
 (0)