Skip to content

Commit 2f7b70e

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent b0e11ed commit 2f7b70e

File tree

616 files changed

+9557
-9477
lines changed

Some content is hidden

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

616 files changed

+9557
-9477
lines changed

‎docs-aspnet/html-helpers/data-management/grid/appearance/adaptive-tools.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ slug: adaptive_tools_gridhelper_aspnetcore
66
position: 6
77
---
88

9-
# Adaptive Tools
9+
# ToolBar Adaptive Tools
1010

1111
The Telerik UI Grid for {{ site.framework }} supports rendering selected toolbar tools in adaptive mode starting with version Q2 2025. This feature improves usability on smaller screens by displaying sorting, filtering, grouping, and editing UI elements in a mobile-friendly ActionSheet.
1212

@@ -453,6 +453,6 @@ To delete a specified record, the user must first select the row, then click the
453453
## See Also
454454

455455
* [{{ site.framework }} Grid Overview](https://www.telerik.com/{{ site.platform }}/grid)
456-
* [Adaptive Tools Demo](https://demos.telerik.com/{{ site.platform }}/grid/adaptive-tools)
457-
* [Adaptive Tools Editing Demo](https://demos.telerik.com/{{ site.platform }}/grid/adaptive-tools-editing)
456+
* [Adaptive Tools Demo](https://demos.telerik.com/{{ site.platform }}/grid/toolbar-tools)
457+
* [Adaptive Tools Editing Demo](https://demos.telerik.com/{{ site.platform }}/grid/toolbar-editing)
458458
* [Server-Side API](/api/grid)

‎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/data-management/grid/toolbar.md‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ slug: htmlhelpers_grid_aspnetcore_toolbar
66
position: 15
77
---
88

9-
# Toolbar
9+
# ToolBar Adaptive Tools
1010

1111
The [`ToolBar()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory) configuration option of the Grid allows you to add command buttons and allow the user to invoke built-in Grid functionalities. You can also define custom commands or use templates to customize the Toolbar of the {{ site.product }} Grid.
1212

@@ -79,6 +79,9 @@ In the 2025 Q2 release an alternative way to configure the tools has been implem
7979
| Search | Adds the built-in search panel for the Grid.| [Search Panel documentation]({% slug htmlhelpers_grid_aspnetcore_searchpanel %})|
8080
| Spacer | Moves the tools that are declared after it to the right side of the ToolBar.| |
8181
| Separator | Acts as a delimiter between the ToolBar commands.| |
82+
| Group | Allows grouping the data from the ToolBar tool. | [Grouping tool documentation]({% slug adaptive_tools_gridhelper_aspnetcore %}#grouping) |
83+
| Sort | Displays a sort tool. | [Sorting tool documentation]({% slug adaptive_tools_gridhelper_aspnetcore %}#sorting) |
84+
| Filter | Allows column filtering from the ToolBar tool. | [Filtering tool documentation]({% slug adaptive_tools_gridhelper_aspnetcore %}#filtering) |
8285

8386
### Overflow
8487

@@ -89,15 +92,20 @@ The following example demonstrates how to modify the default overflow settings o
8992
```Razor
9093
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
9194
.Name("grid")
92-
.ToolBar(t => t.Items(item =>
93-
{
94-
item.Pdf();
95-
item.Excel();
96-
item.Custom().Text("Custom Button 1");
97-
item.Custom().Text("Custom Button 2");
98-
item.Custom().Text("Custom Button 3");
99-
item.Search();
100-
})
95+
.ToolBar(toolbar => toolbar
96+
.Items(itm =>
97+
{
98+
itm.Create();
99+
itm.Edit();
100+
itm.Destroy();
101+
itm.Separator();
102+
itm.Filter();
103+
itm.Sort();
104+
itm.Group();
105+
itm.Spacer();
106+
itm.ColumnChooser();
107+
})
108+
)
101109
.Overflow(o => o
102110
.Mode(ToolBarOverflowMode.Scroll)
103111
.ScrollButtons(ScrollButtonsType.Auto)
@@ -111,13 +119,15 @@ The following example demonstrates how to modify the default overflow settings o
111119
```TagHelper
112120
<kendo-grid name="grid">
113121
<toolbar>
114-
<toolbar-button name="pdf"></toolbar-button>
115-
<toolbar-button name="excel"></toolbar-button>
116-
<toolbar-button name="custom" text="Custom Button 1"></toolbar-button>
117-
<toolbar-button name="custom" text="Custom Button 2"></toolbar-button>
118-
<toolbar-button name="custom" text="Custom Button 3"></toolbar-button>
119-
<toolbar-button name="Search"></toolbar-button>
120-
<overflow mode="ToolBarOverflowMode.Scroll" scroll-buttons="ScrollButtonsType.Auto" scroll-buttons-position="ScrollButtonsPositionType.Start" scroll-distance="50" />
122+
<toolbar-button name="create"></toolbar-button>
123+
<toolbar-button name="edit"></toolbar-button>
124+
<toolbar-button name="destroy"></toolbar-button>
125+
<toolbar-button name="separator"></toolbar-button>
126+
<toolbar-button name="filter"></toolbar-button>
127+
<toolbar-button name="sort"></toolbar-button>
128+
<toolbar-button name="group"></toolbar-button>
129+
<toolbar-button name="spacer" type="spacer" />
130+
<toolbar-button name="columnChooser"></toolbar-button>
121131
</toolbar>
122132
<!-- Additional configuration. -->
123133
</kendo-grid>
@@ -143,11 +153,17 @@ The following example demonstrates how to add a custom command to the Toolbar:
143153
columns.Command(command => command.Destroy()).Width(150);
144154
})
145155
.ToolBar(toolbar =>toolbar
146-
.Items(itm=>{
156+
.Items(itm =>
157+
{
147158
itm.Create();
148159
itm.Edit();
149-
itm.Save();
150-
itm.CancelEdit();
160+
itm.Destroy();
161+
itm.Separator();
162+
itm.Filter();
163+
itm.Sort();
164+
itm.Group();
165+
itm.Spacer();
166+
itm.ColumnChooser();
151167
})
152168
.ShowInactiveTools(true)
153169
.Overflow(overflow => overflow
@@ -164,14 +180,16 @@ The following example demonstrates how to add a custom command to the Toolbar:
164180
{% if site.core %}
165181
```TagHelper
166182
<kendo-grid name="grid">
167-
<toolbar show-inactive-tools="true">
168-
<overflow mode=ToolBarOverflowMode.Scroll
169-
scroll-buttons=ScrollButtonsType.Visible
170-
scroll-buttons-position=ScrollButtonsPositionType.Split/>
183+
<toolbar show-inactive-tools="false">
171184
<toolbar-button name="create"></toolbar-button>
172185
<toolbar-button name="edit"></toolbar-button>
173-
<toolbar-button name="save"></toolbar-button>
174-
<toolbar-button name="cancelEdit"></toolbar-button>
186+
<toolbar-button name="destroy"></toolbar-button>
187+
<toolbar-button name="separator"></toolbar-button>
188+
<toolbar-button name="filter"></toolbar-button>
189+
<toolbar-button name="sort"></toolbar-button>
190+
<toolbar-button name="group"></toolbar-button>
191+
<toolbar-button name="spacer" type="spacer" />
192+
<toolbar-button name="columnChooser"></toolbar-button>
175193
</toolbar>
176194
<editable mode="incell"/>
177195
</kendo-grid>

‎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)