Skip to content

Commit b6fc229

Browse files
committed
Sync with Kendo UI Professional
1 parent 9e4d797 commit b6fc229

File tree

36 files changed

+1070
-353
lines changed

36 files changed

+1070
-353
lines changed

docs-aspnet/_config.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -786,13 +786,13 @@ navigation:
786786
baseurl: /aspnet-core
787787

788788
## The Kendo UI version used
789-
cdnVersion: "2025.1.227"
789+
cdnVersion: "2025.2.520"
790790

791791
## The themes CDN used
792-
themesCdnVersion: "10.2.0"
792+
themesCdnVersion: "11.0.2"
793793

794794
## The MVC Core version used
795-
mvcCoreVersion: "2025.1.227"
795+
mvcCoreVersion: "2025.2.520"
796796

797797
productCode: UIASPCORE
798798

docs-aspnet/html-helpers/data-management/grid/toolbar.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,30 @@ You can configure the Toolbar and include any of the built-in commands:
4343
```
4444
{% endif %}
4545

46+
In the 2025 Q2 release an alternative way to configure the tools has been implemented. It relies on the `Items` configuration of the Grid toolbar:
47+
48+
```HtmlHelper
49+
.ToolBar(toolbar =>toolbar
50+
.Items(itm=>{
51+
itm.Edit();
52+
itm.Update();
53+
itm.CancelEdit();
54+
itm.Destroy();
55+
itm.Search();
56+
itm.Excel();
57+
itm.Sort();
58+
itm.Filter();
59+
itm.ColumnChooser();
60+
itm.Group().ReorderButtons(true);
61+
itm.Pdf();
62+
})
63+
.Overflow(overflow => overflow
64+
.Mode(ToolBarOverflowMode.Scroll)
65+
.ScrollButtons(ScrollButtonsType.Visible)
66+
.ScrollButtonsPosition(ScrollButtonsPositionType.Split)
67+
)
68+
)
69+
```
4670

4771
| Command | Description | Resources|
4872
|---|---|---|
@@ -56,6 +80,58 @@ You can configure the Toolbar and include any of the built-in commands:
5680
| Spacer | Moves the tools that are declared after it to the right side of the ToolBar.| |
5781
| Separator | Acts as a delimiter between the ToolBar commands.| |
5882

83+
## Disable Inactive Tools
84+
85+
Starting with 2025 Q2 release the Grid component provides the possibility to disable or hide the inactive tools when editing. By default the inactive tools will be hidden. When the `ToolBar.ShowInactiveTools` option is enabled the inactive tools will be displayed as disabled.
86+
In the example below, the inactive buttons will be disabled until a change in the Grid data is made:
87+
88+
The following example demonstrates how to add a custom command to the Toolbar:
89+
```HtmlHelper
90+
@(Html.Kendo().Grid<MyApplication1.Models.ProductViewModel>()
91+
.Name("grid")
92+
.Columns(columns => {
93+
columns.Bound(p => p.ProductName);
94+
columns.Bound(p => p.UnitPrice).Width(140);
95+
columns.Bound(p => p.UnitsInStock).Width(140);
96+
columns.Bound(p => p.Discontinued).Width(100);
97+
columns.Command(command => command.Destroy()).Width(150);
98+
})
99+
.ToolBar(toolbar =>toolbar
100+
.Items(itm=>{
101+
itm.Create();
102+
itm.Edit();
103+
itm.Save();
104+
itm.CancelEdit();
105+
})
106+
.ShowInactiveTools(true)
107+
.Overflow(overflow => overflow
108+
.Mode(ToolBarOverflowMode.Scroll)
109+
.ScrollButtons(ScrollButtonsType.Visible)
110+
.ScrollButtonsPosition(ScrollButtonsPositionType.Split)
111+
)
112+
)
113+
.Editable(editable => editable.Mode(GridEditMode.InCell))
114+
//additional configuration omitted for brevity
115+
)
116+
</script>
117+
```
118+
{% if site.core %}
119+
```TagHelper
120+
<kendo-grid name="grid">
121+
<toolbar show-inactive-tools="true">
122+
<overflow mode=ToolBarOverflowMode.Scroll
123+
scroll-buttons=ScrollButtonsType.Visible
124+
scroll-buttons-position=ScrollButtonsPositionType.Split/>
125+
<toolbar-button name="create"></toolbar-button>
126+
<toolbar-button name="edit"></toolbar-button>
127+
<toolbar-button name="save"></toolbar-button>
128+
<toolbar-button name="cancelEdit"></toolbar-button>
129+
</toolbar>
130+
<editable mode="incell"/>
131+
</kendo-grid>
132+
```
133+
{% endif %}
134+
59135
## Custom Commands
60136

61137
The Toolbar of the Grid component supports custom commands.
@@ -92,6 +168,23 @@ The following example demonstrates how to add a custom command to the Toolbar:
92168
```
93169
{% endif %}
94170

171+
If you are using the `Toolbar.Items` configuration (available since the Q2 2025 release), you can add a custom command as shown below:
172+
173+
```HtmlHelper
174+
.ToolBar(toolbar =>toolbar
175+
.Items(itm=>{
176+
itm.Excel();
177+
itm.Pdf();
178+
itm.Custom().ClientTemplate(
179+
Html.Kendo().Template().AddComponent(c => c
180+
.Button()
181+
.Name("refresh")
182+
.Icon("arrow-rotate-cw")
183+
.HtmlAttributes(new { title = "Refresh" })
184+
));
185+
})
186+
)
187+
```
95188

96189
## Toolbar Template
97190

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
title: Icons
3+
page_title: Telerik UI Menu component for {{ site.framework }} Documentation - Icons
4+
description: "Learn how you can display icons in the items of the {{ site.product }} Menu."
5+
slug: htmlhelpers_menu_icons
6+
position: 6
7+
---
8+
9+
# Icons
10+
11+
Starting with Telerik UI for {{ site.framework }} R2 2025, the Menu exposes two new icon-related fields&mdash;the [`DataIconField`](/api/kendo.mvc.ui.fluent/menubuilder#dataiconfieldsystemstring) and the [`DataIconClassField`](/api/kendo.mvc.ui.fluent/menubuilder#dataiconclassfieldsystemstring) options. Depending on your project's needs, you can enhance the content of the Menu by displaying either an SVG or a Font Icon. To display an icon in the items of the Menu, select one from the <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/" target="_blank">list of icons supported by Telerik UI for {{ site.framework }}</a>, and set the `Icon` field to the necessary icon name.
12+
13+
14+
## SVG Icons
15+
16+
The following example demonstrates how to display SVG icons in the Menu's items when the component is configured for remote data binding. Also, the icon of the first item has a custom CSS class added through the `IconClass` option.
17+
18+
```HtmlHelper
19+
@(Html.Kendo().Menu()
20+
.Name("menu")
21+
.DataTextField("Text")
22+
.DataIconField("Icon")
23+
.DataIconClassField("IconClass")
24+
.BindTo(new MenuItem[] {
25+
new MenuItem { Text = "Home", Icon = "home", IconClass = "custom-icon-class" },
26+
new MenuItem { Text = "About Us", Icon = "info-circle" },
27+
new MenuItem { Text = "Contact", Icon = "envelope" }
28+
})
29+
)
30+
```
31+
{% if site.core %}
32+
```TagHelper
33+
@using Kendo.Mvc.TagHelpers
34+
35+
@{
36+
var items = new MenuItemBase[] {
37+
new MenuItemBase { Text = "Home", Icon = "home", IconClass = "custom-icon-class" },
38+
new MenuItemBase { Text = "About Us", Icon = "info-circle" },
39+
new MenuItemBase { Text = "Contact", Icon = "envelope" }
40+
};
41+
}
42+
43+
<kendo-menu
44+
name="menu"
45+
dataTextField="Text"
46+
dataIconField="Icon"
47+
dataIconClassField="IconClass"
48+
bind-to="@items"
49+
/>
50+
```
51+
{% endif %}
52+
53+
## Font Icons
54+
55+
The following example demonstrates how to display Font icons in the Menu's items when the component binds to a data collection.
56+
57+
```HtmlHelper
58+
<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-font-icons/dist/index.css" />
59+
60+
@(Html.Kendo().Menu()
61+
.Name("menu")
62+
.BindTo(new MenuItem[] {
63+
new MenuItem { Text = "Home", Icon = "home" },
64+
new MenuItem { Text = "About Us", Icon = "info-circle" },
65+
new MenuItem { Text = "Contact", Icon = "envelope" }
66+
})
67+
)
68+
69+
<script>
70+
kendo.setDefaults("iconType", "font");
71+
</script>
72+
```
73+
{% if site.core %}
74+
```TagHelper
75+
@using Kendo.Mvc.TagHelpers
76+
77+
<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-font-icons/dist/index.css" />
78+
79+
@{
80+
var items = new MenuItemBase[] {
81+
new MenuItemBase { Text = "Home", Icon = "home" },
82+
new MenuItemBase { Text = "About Us", Icon = "info-circle" },
83+
new MenuItemBase { Text = "Contact", Icon = "envelope" }
84+
};
85+
}
86+
87+
<kendo-menu
88+
name="menu"
89+
bind-to="@items"
90+
/>
91+
92+
<script>
93+
kendo.setDefaults("iconType", "font");
94+
</script>
95+
```
96+
{% endif %}
97+
98+
## Icon Position
99+
100+
You can define the position of the icons in the Menu items by using the `IconPosition()` option. By default, each icon is positioned before the item's text.
101+
102+
```HtmlHelper
103+
@(Html.Kendo().Menu()
104+
.Name("menu")
105+
.IconPosition(IconPosition.After)
106+
.BindTo(new MenuItem[] {
107+
new MenuItem { Text = "Home", Icon = "home" },
108+
new MenuItem { Text = "About Us", Icon = "info-circle" },
109+
new MenuItem { Text = "Contact", Icon = "envelope" }
110+
})
111+
)
112+
```
113+
```TagHelper
114+
@using Kendo.Mvc.TagHelpers
115+
116+
@{
117+
var items = new MenuItemBase[] {
118+
new MenuItemBase { Text = "Home", Icon = "home" },
119+
new MenuItemBase { Text = "About Us", Icon = "info-circle" },
120+
new MenuItemBase { Text = "Contact", Icon = "envelope" }
121+
};
122+
}
123+
124+
<kendo-menu
125+
name="menu"
126+
icon-position="@IconPosition.After"
127+
bind-to="@items"
128+
/>
129+
```
130+
131+
## See Also
132+
133+
* [Using the API of the Menu for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/menu/api)
134+
* [Client-Side API of the Menu](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu)
135+
* [Server-Side API of the Menu](/api/menu)
136+
{% if site.core %}
137+
* [Server-Side API of the Menu TagHelper](/api/taghelpers/menu)
138+
{% endif %}
139+
* [Knowledge Base Section](/knowledge-base)

docs-aspnet/html-helpers/navigation/menu/overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,7 @@ The following example demonstrates the basic configuration of the Menu.
282282
| [Animations]({% slug animations_menu %})| The Menu allows you to define animations for opening and closing its sub-items. |
283283
| [ContextMenu]({% slug htmlhelpers_contextmenu_aspnetcore %})| The Menu component supports the creation and implementation of context menus that open on right-click or based on custom events. |
284284
| [Security Trimming]({% slug securitytrimming_menu_aspnetmvc %})| The built-in security trimming functionality of the Menu is enabled by default. |
285+
| [Icons]({% slug htmlhelpers_menu_icons %})| Display icons in the Menu items to enhance the appearance of the component. |
285286
| [Events]({% slug events_menu %})| Explore the various Menu events that allow you to control what happens when the user interacts with the component. |
286287
| [Accessibility]({% slug htmlhelpers_menu_accessibility %})| The Menu is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. |
287288

docs-aspnet/html-helpers/pdf/pdfviewer/form-filling.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ Starting with Telerik UI {{ site.framework }} version Q2 2025, the PDFViewer int
1212

1313
When uploading PDF files that contain forms, users can utilize the form editors by entering data and making selections without requiring external PDF editing tools. The Form Filling feature simplifies the process of editing and managing PDF forms, enhancing user experience and productivity.
1414

15-
> Form Filing feature is available only with [PDF.js processing]({% slug htmlhelpers_pdfviewer_pdfjs_processing_aspnetcore%}).
15+
> The Form Filling feature is available only with [PDF.js processing]({% slug htmlhelpers_pdfviewer_pdfjs_processing_aspnetcore%}).
1616
17-
To activate the Form Filling feature, enable the `RenderForms` option in the `PdfjsProcessing` configuration:
17+
To activate the Form Filling feature, enable the `RenderForms()` option in the `PdfjsProcessing()` configuration:
1818

1919
```HtmlHelper
2020
@(Html.Kendo().PDFViewer()
@@ -40,10 +40,8 @@ The supported form input types include:
4040

4141
- Text Box&mdash;Enables users to input and edit text within designated form fields.
4242
- Password Box&mdash;Provides secure entry of sensitive information through password-protected fields.
43-
- Combo Box&mdash;Allows users to select options from a drop-down menu within the PDF form.
4443
- Check Box&mdash;Lets users toggle between selected and deselected states for predefined options.
4544
- Radio Button&mdash;Implements radio button functionality for selecting exclusive options within a group.
46-
- Signature Field&mdash;Enables users to digitally sign PDF documents directly within the viewer.
4745
- List Box&mdash;Allows users to select multiple options from a list of predefined items.
4846

4947
## Form Styling

0 commit comments

Comments
 (0)