Skip to content

Commit a5854c5

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 283c95f commit a5854c5

File tree

30 files changed

+792
-54
lines changed

30 files changed

+792
-54
lines changed

‎docs-aspnet/_contentTemplates/mvc/add-client-side-resources.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,22 @@ Before you can use a Telerik UI component, you must include the theme, the jQuer
2121

2222
Removing this script is crucial because in the next step you add the jQuery script provided by Telerik. Having more than one script references causes errors.
2323

24-
1. Add the jQuery script hosted on the Telerik CDN to the `<head>`.
24+
1. Add the jQuery script to the `<head>` tag.
2525

2626
<head>
2727
...
2828
<link href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
2929
30-
@* Add the jQuery script from the Telerik CDN: *@
31-
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jquery.min.js"></script>
30+
@* Add the jQuery script from the jQuery CDN: *@
31+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
3232
</head>
3333

3434
1. Add the Kendo UI scripts. The Kendo UI script files required by UI for ASP.NET MVC must be loaded in the `<head>` tag *after* the jQuery script.
3535

3636
<head>
3737
...
3838
<link href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
39-
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jquery.min.js"></script>
39+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
4040

4141
@* Add the Kendo UI scripts: *@
4242
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jszip.min.js"></script>
@@ -53,7 +53,7 @@ Before you can use a Telerik UI component, you must include the theme, the jQuer
5353
@Styles.Render("~/Content/css")
5454
@Scripts.Render("~/bundles/modernizr")
5555
<link href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
56-
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jquery.min.js"></script>
56+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
5757
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jszip.min.js"></script>
5858
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.all.min.js"></script>
5959
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.aspnetmvc.min.js"></script>

‎docs-aspnet/asp-net-mvc-3.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ Below are listed the steps for you to follow when including the Telerik UI for A
134134

135135
**Step 4** Include the jQuery JavaScript file from the CDN or a compatible version from other location. Add a `script` tag in within the `head` tag.
136136

137-
<script src="https://kendo.cdn.telerik.com/<kendo ui version>/js/jquery.min.js”></script>
137+
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
138138

139139
**Step 5** Include `kendo.all.min.js` and `kendo.aspnetmvc.min.js` after jQuery.
140140

‎docs-aspnet/cloud-integration/amazon-web-services/dynamodb.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Once you have a user with the necessary permissions, you can proceed with config
4242
<link rel="stylesheet" href=""https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/default/default-main.css">
4343
4444
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.221.1.min.js"></script>
45-
<script src="https://kendo.cdn.telerik.com/{{site.cdnVersion}}/js/jquery.min.js"></script>
45+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
4646
<script src="https://kendo.cdn.telerik.com/{{site.cdnVersion}}/js/kendo.all.min.js"></script>
4747
<script src="https://kendo.cdn.telerik.com/{{site.cdnVersion}}/js/kendo.aspnetmvc.min.js"></script>
4848

‎docs-aspnet/getting-started-core/first-steps-cli.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ Install the appropriate [.Net Core SDK 2.0 or later](https://www.microsoft.com/n
109109
110110
> * The CDN links and/or package versions have to point to the same UI for ASP.NET Core version which your project references.
111111
> * The Kendo UI scripts have to be placed after `jQuery`.
112+
> * As of R3 2023 the Kendo UI bundles do not include the jQuery library in their `js` directories and you can use any available jQuery source you prefer (https://jquery.com/download/).
112113
113114
5.1 Go to `~\Views\Shared\_Layout.cshtml` and add the theme of your choice to the `<head>` of the document. Since the Microsoft project uses Bootstrap, you can use the Kendo UI SASS Bootstrap theme to match it.
114115

‎docs-aspnet/getting-started-core/first-steps-vs-mac.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ To get up and running with the project:
7575

7676
> * The CDN links and/or package versions have to point to the same UI for ASP.NET Core version which your project references.
7777
> * The Kendo UI scripts have to be placed after `jQuery`.
78+
> * As of R3 2023 the Kendo UI bundles do not include the jQuery library in their `js` directories and you can use any available jQuery source you prefer (https://jquery.com/download/).
7879

7980
7.1 Since the Microsoft template project uses Bootstrap, you can use the Kendo UI SASS Bootstrap theme to match it.
8081

‎docs-aspnet/getting-started-core/first-steps.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -174,16 +174,16 @@ Before you can use a Telerik UI component, you must include the theme, the jQuer
174174

175175
1. The Microsoft ASP.NET Core Web Application template comes with a jQuery script reference at the end of _Layout.cshtml file. Find the `jquery.min.js` script line in the `<body>` of the document and remove it.
176176

177-
1. Add the `jQuery` script hosted on the Telerik CDN:
177+
1. Add the `jQuery` script hosted on the jQuery CDN:
178178

179179
<head>
180180
...
181181
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
182182
<link rel="stylesheet" href="~/css/site.css" />
183183
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-main.css" />
184184

185-
@* Add the the jQuery script from the Telerik CDN: *@
186-
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jquery.min.js"></script>
185+
@* Add the jQuery script from the jQuery CDN: *@
186+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
187187
...
188188
</head>
189189

@@ -194,7 +194,7 @@ Before you can use a Telerik UI component, you must include the theme, the jQuer
194194
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
195195
<link rel="stylesheet" href="~/css/site.css" />
196196
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-main.css" />
197-
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jquery.min.js"></script>
197+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
198198

199199
@* Add the Kendo UI scripts: *@
200200
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.all.min.js"></script>
@@ -203,6 +203,7 @@ Before you can use a Telerik UI component, you must include the theme, the jQuer
203203

204204
>* The `kendo.all.min.js` and `kendo.aspnetmvc.min.js` script must be loaded after the `jquery.min.js` script.
205205
>* `jQuery` must be loaded only once. Make sure there are no duplicate references elsewhere in the `_Layout`.
206+
>* As of R3 2023 the Kendo UI bundles do not include the jQuery library in their `js` directories and you can use any available jQuery source you prefer (https://jquery.com/download/).
206207
207208
If you prefer to include the client-side resources from a local source instead of CDNs, see the [Local Client-Side Resources]({% slug using_local_client_side_resources %}) article.
208209

‎docs-aspnet/globalization/localization.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ The following example demonstrates how to register the localization script in th
5353

5454
The following example demonstrates how to register the localization script in the`_Layout.cshtml` file by using CDN.
5555

56-
<script src="https://kendo.cdn.telerik.com/<version>/js/jquery.min.js"></script>
56+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
5757
<script src="https://kendo.cdn.telerik.com/<version>/js/kendo.all.min.js"></script>
5858
<script src="https://kendo.cdn.telerik.com/<version>/js/kendo.aspnetmvc.min.js"></script>
5959
<script src="https://kendo.cdn.telerik.com/<version>/js/messages/kendo.messages.es-ES.min.js"></script>

‎docs-aspnet/globalization/overview.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ To use a culture that is different from the default `en-US` one in {{ site.produ
4747
<script src="~/lib/kendo-ui/js/cultures/kendo.culture.es-ES.min.js"></script>
4848
```
4949
```CDN
50-
<script src="https://kendo.cdn.telerik.com/<version>/js/jquery.min.js"></script>
50+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
5151
<script src="https://kendo.cdn.telerik.com/<version>/js/kendo.all.min.js"></script>
5252
<script src="https://kendo.cdn.telerik.com/<version>/js/kendo.aspnetmvc.min.js"></script>
5353
<script src="https://kendo.cdn.telerik.com/<version>/js/cultures/kendo.culture.es-ES.min.js"></script>
@@ -60,7 +60,7 @@ To use a culture that is different from the default `en-US` one in {{ site.produ
6060
<script src="@Url.Content("~/Scripts/cultures/kendo.culture.es-ES.min.js")"></script>
6161
```
6262
```CDN
63-
<script src="https://kendo.cdn.telerik.com/<version>/js/jquery.min.js"></script>
63+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
6464
<script src="https://kendo.cdn.telerik.com/<version>/js/kendo.all.min.js"></script>
6565
<script src="https://kendo.cdn.telerik.com/<version>/js/kendo.aspnetmvc.min.js"></script>
6666
<script src="https://kendo.cdn.telerik.com/<version>/js/cultures/kendo.culture.es-ES.min.js"></script>

‎docs-aspnet/html-helpers/data-management/grid/contex-menu.md

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
---
2+
title: Context Menu
3+
page_title: Context Menu
4+
description: "Learn how to enable and configure the Context Menu of the Telerik UI Grid for {{ site.framework }}."
5+
slug: grid_aspnetcore_contextmenu
6+
position: 15
7+
---
8+
9+
# Context Menu
10+
11+
The {{site.product}} Grid provides a built-in ContextMenu to show the user available options, such as CRUD operations, selection and export options. A ContextMenu is shown when the user right-clicks on the Grid's table `body` or `head` elements.
12+
13+
By default, the Context Menu of the Telerik UI Grid for {{ site.framework }} is disabled.
14+
15+
## Getting Started
16+
17+
To enable a Context Menu with default commands for the Grid, use the `ContextMenu()` configuration option.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
21+
.Name("Grid")
22+
.ContextMenu() // Enable the Context Menu for the Grid.
23+
...
24+
)
25+
```
26+
{% if site.core %}
27+
```TagHelper
28+
<kendo-grid name="grid">
29+
<context-menu enabled="true"></context-menu>
30+
</kendo-grid>
31+
```
32+
{% endif %}
33+
34+
When enabled the ContextMenu shown on the Grid's table `head` element contains the `SortAsc` and `SortDesc` commands. The ContextMenu shown on the Grid's table `body` element contains the `CopySelection`, `CopySelectionNoHeaders`, `Create`, `Edit`, `Destroy`, `Select`, `ReorderRow`, `ExportPdf` and `ExportExcel` commands.
35+
36+
## Customization
37+
38+
The Context Menu provides the option to use default commands and add custom commands. In addition, you can configure the items that are displayed in the ContextMenu for the Grid's table `head` element and those in the ContextMenu for the Grid's table `body` element.
39+
40+
### Default Commands
41+
42+
The table below lists the default Context Menu commands.
43+
44+
| Command | Description |
45+
|---- |---- |
46+
|`Separator` | Renders a separator |
47+
|`Create` | Creates a new item |
48+
|`Edit` | Brings the item in edit mode |
49+
|`Destroy` | Destroys the item |
50+
|`Select` | Selects the item |
51+
|`CopySelection`| Copies selection |
52+
|`CopySelectionNoHeaders`| Copies selection without the headers|
53+
|`ReorderRow` | Reorders the row |
54+
|`ExportPDF` | Exports the Grid to PDF |
55+
|`ExportExcel` | Exports the Grid to Excel |
56+
|`SortAsc` | Sorts the items in ascending direction|
57+
|`SortDesc` | Sorts the items in descending direction|
58+
59+
The following example demonstrates how you can customize the Context Menu using the default commands:
60+
61+
```HtmlHelper
62+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
63+
.Name("Grid")
64+
.ContextMenu(menu => menu
65+
.Head(head => {
66+
head.Create();
67+
head.Separator();
68+
head.SortAsc();
69+
head.SortDesc();
70+
head.Separator();
71+
head.ExportPDF().Text("Generate Pdf File").Icon("file"); //modify the built-in text for the comand and change the icon
72+
head.ExportExcel();
73+
})
74+
.Body(body => {
75+
body.Edit();
76+
body.Destroy();
77+
body.Separator();
78+
body.Select();
79+
body.CopySelection();
80+
body.CopySelectionNoHeaders();
81+
body.Separator();
82+
body.ReorderRow();
83+
})
84+
)
85+
...
86+
)
87+
```
88+
{% if site.core %}
89+
```TagHelper
90+
<kendo-grid name="grid" height="550">
91+
<context-menu>
92+
<head>
93+
<context-menu-item name="create"/>
94+
<context-menu-item name="separator"/>
95+
<context-menu-item name="sortAsc"/>
96+
<context-menu-item name="sortDesc"/>
97+
<context-menu-item name="separator"/>
98+
<context-menu-item name="exportPdf" text="Generate PDF file" icon="file" /> //modify the built-in text for the comand and change the icon
99+
<context-menu-item name="exportExcel"/>
100+
</head>
101+
<body>
102+
<context-menu-item name="edit" />
103+
<context-menu-item name="destroy"/>
104+
<context-menu-item name="separator"/>
105+
<context-menu-item name="select"/>
106+
<context-menu-item name="copySelection"/>
107+
<context-menu-item name="copySelectionNoHeaders"/>
108+
<context-menu-item name="separator"/>
109+
<context-menu-item name="reorderRow"/>
110+
</body>
111+
</context-menu>
112+
</kendo-grid>
113+
```
114+
{% endif %}
115+
116+
### Custom Commands
117+
118+
You can also register custom commands for the Context Menu. The following example demonstrates how to implement a custom command:
119+
120+
```HtmlHelper
121+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
122+
.Name("Grid")
123+
.ContextMenu(menu => menu
124+
.Head(head => {
125+
head.Create();
126+
head.Separator();
127+
head.Custom("myTool").Text("My Tool).Icon("gear");
128+
})
129+
)
130+
...
131+
)
132+
```
133+
{% if site.core %}
134+
```TagHelper
135+
<kendo-grid name="grid" height="550">
136+
<context-menu>
137+
<head>
138+
<context-menu-item name="create"/>
139+
<context-menu-item name="separator"/>
140+
<context-menu-item name="myTool" text="My Tool" icon="gear" command="myToolCommand"/>
141+
</head>
142+
</context-menu>
143+
</kendo-grid>
144+
```
145+
{% endif %}
146+
```JavaScript
147+
kendo.ui.grid.commands["myToolCommand"] = kendo.ui.grid.GridCommand.extend({
148+
exec: function() {
149+
var that = this,
150+
grid = that.grid;
151+
152+
grid.saveAsPDF();
153+
}
154+
});
155+
```
156+
157+
## Events
158+
159+
The Grid's ContextMenu allows you to subscribe to the following ContextMenu events:
160+
161+
|Event |Description |
162+
|--- |--- |
163+
|`Open`| Fires before a sub menu or the ContextMenu gets opened. You can cancel this event to prevent opening the sub menu. |
164+
|`Close`| Fires before a sub menu or the ContextMenu gets closed. You can cancel this event to prevent closure. |
165+
|`Select`| Fires when a menu item gets selected. |
166+
|`Activate`| Fires when a sub menu or the ContextMenu gets opened and its animation finished. |
167+
|`Deactivate`| Fires when a sub menu or the ContextMenu gets closed and its animation finished. |
168+
169+
The following example demonstrates how to subscribe to the Grid's ContextMenu `Open` and `Close` events:
170+
171+
```HtmlHelper
172+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
173+
.Name("Grid")
174+
.ContextMenu(menu => menu
175+
.Events(ev=>ev
176+
.Open("openMenu")
177+
.Close("closeMenu"))
178+
)
179+
...
180+
)
181+
```
182+
{% if site.core %}
183+
```TagHelper
184+
<kendo-grid name="grid" height="550">
185+
<context-menu enables="true" on-open="openMenu" on-close="closeMenu"></context-menu>
186+
</kendo-grid>
187+
```
188+
{% endif %}
189+
```JavaScript
190+
<script>
191+
function openMenu(){
192+
// Handle the open event.
193+
}
194+
195+
function closeMenu(){
196+
// Handle the close event.
197+
}
198+
</script>
199+
```
200+
201+
## See Also
202+
203+
* [ContextMenu of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/context-menu)
204+
* [Server-Side API](/api/grid)
205+
* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)

‎docs-aspnet/installation/upgrading/upgrade.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ To upgrade the version with NuGet or Bower:
3131
```_Layout.cshtml
3232
3333
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/default/default-main.css" />
34-
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jquery.min.js"></script>
34+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
3535
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.all.min.js"></script>
3636
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.aspnetmvc.min.js"></script>
3737
@@ -49,7 +49,7 @@ To upgrade the version with NuGet or Bower:
4949
```_Layout.cshtml
5050
5151
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/default/default-main.css" />
52-
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/jquery.min.js"></script>
52+
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
5353
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.all.min.js"></script>
5454
<script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.aspnetmvc.min.js"></script>
5555

0 commit comments

Comments
 (0)