Skip to content

Commit 55570b9

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 2adc751 commit 55570b9

File tree

6 files changed

+186
-59
lines changed

6 files changed

+186
-59
lines changed

‎docs/controls/appbar/appbar-overview.PNG‎

-31.2 KB
Loading

‎docs/controls/appbar/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ CTAControlName: AppBar
1111

1212
The AppBar component is used mainly for navigation. At the same time, it is template-driven, which makes it very flexible—it can render whatever you throw at it. To take full advantage of its functionality, you can include various [Content Items]({% slug items_kendoui_appbar_widget %}) in the AppBar component.
1313

14-
![Kendo UI for jQuery AppBar Overview](appbar-overview.PNG)
14+
![Kendo UI for jQuery AppBar Overview](appbar-overview.png)
1515

1616
## Functionality and Features
1717

‎docs/controls/menu/items.md‎

Lines changed: 137 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,158 @@
11
---
22
title: Items
33
page_title: jQuery Menu Documentation - Items
4-
description: "Get started with the jQuery Menu by Kendo UI and configure the items of the widget."
4+
description: "Get started with the jQuery Menu by Kendo UI and configure the items of the component."
55
slug: items_kendoui_menu
66
position: 4
77
---
88

99
# Items
1010

11-
The Menu provides options for dynamically adding and removing its items.
11+
The Menu component displays a hierarchical list of items, which can include submenus, icons, and custom templates. You can define the Menu items declaratively in the HTML or dynamically through JavaScript configuration.
1212

13-
To add items, provide the new item as a JSON object along with a reference item. A reference item is a target Menu item HTML element that already exists in the Menu. The reference item will be used to determine the placement in the hierarchy of the new item. Any valid jQuery selector can be used to obtain a reference to the target item. For more information, refer to the [demo on using the API of the Menu](https://demos.telerik.com/kendo-ui/menu/api).
13+
You can configure the Menu items by specifying an array of objects, where each object represents a menu item. Each item can have the following properties:
1414

15-
The following example demonstrates how to add a new root Menu item.
15+
| Name | Type | Description |
16+
|--------------|-----------|-----------------------------------------------------------------------------|
17+
| `text` | String | The text displayed for the item. |
18+
| `url` | String | The URL to navigate to when the item is clicked. |
19+
| `icon` | String | The name of a <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/ target="_blank">built-in Kendo UI icon</a> to display. |
20+
| `imageUrl` | String | The URL of an image to display as an icon. |
21+
| `items` | Array | An array of child items (submenus). |
22+
| `enabled` | Boolean | If set to `false`, the item will be disabled. |
23+
| `cssClass` | String | A custom CSS class to apply to the item. |
1624

25+
## Setting the Text
26+
27+
You can define the text of the item using the `text` field.
28+
29+
```dojo
30+
<ul id="menu"></ul>
31+
32+
<script>
33+
$("#menu").kendoMenu({
34+
dataSource: [
35+
{ text: "File", items: [
36+
{ text: "New" },
37+
{ text: "Open" },
38+
{ text: "Save" }
39+
]
40+
},
41+
{ text: "Edit", items: [
42+
{ text: "Cut" },
43+
{ text: "Copy" },
44+
{ text: "Paste" }
45+
]
46+
},
47+
{ text: "Help" }
48+
]
49+
});
50+
</script>
51+
```
52+
53+
## Configuring URLs
54+
55+
You can set the URL of the items by using the `url` field. The URL will be rendered as an href attribute on the item link.
56+
57+
```dojo
58+
<ul id="menu"></ul>
59+
<script>
60+
$("#menu").kendoMenu({
61+
dataSource: [
62+
{ text: "Home", url: "https://www.example.com/?item=1.1" },
63+
{ text: "About Us", url: "https://www.example.com/?item=1.2" },
64+
{ text: "Contact", url: "https://www.example.com/?item=1.3" }
65+
]
66+
});
67+
</script>
68+
```
69+
70+
## Showing Icons and Images
71+
72+
You can easily enhance the content in the Menu by showing an icon or an image through the `icon` and `imageUrl` fields:
73+
74+
```dojo
1775
<ul id="menu"></ul>
76+
<script>
77+
$("#menu").kendoMenu({
78+
dataSource: {
79+
data: [
80+
{
81+
Name: "Image Item",
82+
imgUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png",
83+
},
84+
{
85+
Name: "Icon Item",
86+
icon: "gear",
87+
},
88+
],
89+
},
90+
dataTextField: "Name",
91+
dataImageUrlField: "imgUrl",
92+
});
93+
</script>
94+
```
95+
96+
## Adding Styles and Classes
97+
98+
You can add custom CSS classes to the Menu items through the `cssClass` field.
99+
100+
```dojo
101+
<ul id="menu"></ul>
102+
<script>
103+
$("#menu").kendoMenu({
104+
dataSource: [
105+
{
106+
text: "Red Item",
107+
cssClass: "red",
108+
items: [
109+
{text: "Sub Red Item" , cssClass: "red"}
110+
]
111+
},
112+
{
113+
text: "Green Item",
114+
cssClass: "green",
115+
items: [
116+
{text: "Sub Green Item" , cssClass: "green"}
117+
]
118+
}
119+
],
120+
});
121+
</script>
122+
<style>
123+
.red {
124+
color: red !important;
125+
}
126+
127+
.green {
128+
color: green !important;
129+
}
130+
</style>
131+
```
18132

133+
## Disabling Items
134+
135+
You can specify a Menu item as disabled by using the `enabled` field.
136+
137+
```dojo
138+
<ul id="menu"></ul>
19139
<script>
20-
var menu = $("#menu").kendoMenu().data("kendoMenu");
21-
menu.insertAfter(
22-
{ text: "New Menu Item" },
23-
menu.element.children("li:last")
24-
);
140+
$("#menu").kendoMenu({
141+
dataSource: [
142+
{
143+
text: "Item 1",
144+
},
145+
{
146+
text: "Disabled Item",
147+
enabled:false
148+
}
149+
],
150+
});
25151
</script>
152+
```
26153

27154
## See Also
28155

29-
* [Basic Usage of the Menu (Demo)](https://demos.telerik.com/kendo-ui/menu/index)
156+
* [Overview of the Menu (Demo)](https://demos.telerik.com/kendo-ui/menu/index)
30157
* [Using the API of the Menu (Demo)](https://demos.telerik.com/kendo-ui/menu/api)
31158
* [JavaScript API Reference of the Menu](/api/javascript/ui/menu)

‎docs/intro/installation/licensing/overview.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ position: 1
1010

1111
# Licensing Overview
1212

13-
Activating your Kendo UI for jQuery license in your project is a straightforward process that ensures the uninterrupted operation of the components and full access to their features. This guide walks you through the steps to properly integrate and activate your license key.
13+
Kendo UI for jQuery requires activation through a license key for both trial and commercial licenses. Activating the license in your project is a straightforward process that ensures the uninterrupted operation of the components and full access to their features. This guide walks you through the steps to properly integrate and activate your license key.
1414

1515
You can activate the Kendo UI for jQuery license in either of the following ways:
1616

@@ -41,4 +41,4 @@ To activate the Kendo UI for jQuery components, [download your assigned license
4141
* [Frequently Asked Questions about Your Kendo UI for jQuery License Key]({% slug license-code-faq %})
4242
* [Adding Your Script License Key]({% slug using-license-code %})
4343
* [Adding a License Key File (NPM)]({% slug using-license-file %})
44-
* [Handling License Key File Name and Environment Variable Name Changes in the 2025 Q1 Release]({% slug handling-license-file-name-changes %})
44+
* [Handling License Key File Name and Environment Variable Name Changes in the 2025 Q1 Release]({% slug handling-license-file-name-changes %})

‎package-lock.json‎

Lines changed: 39 additions & 39 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
"version": "1.0.0",
1212
"devDependencies": {
1313
"@progress/kendo-svg-icons": "4.5.0",
14-
"@progress/kendo-theme-bootstrap": "11.1.0",
15-
"@progress/kendo-theme-classic": "11.1.0",
16-
"@progress/kendo-theme-core": "11.1.0",
17-
"@progress/kendo-theme-default": "11.1.0",
18-
"@progress/kendo-theme-fluent": "11.1.0",
19-
"@progress/kendo-theme-material": "11.1.0",
20-
"@progress/kendo-theme-utils": "11.1.0",
14+
"@progress/kendo-theme-bootstrap": "11.2.0",
15+
"@progress/kendo-theme-classic": "11.2.0",
16+
"@progress/kendo-theme-core": "11.2.0",
17+
"@progress/kendo-theme-default": "11.2.0",
18+
"@progress/kendo-theme-fluent": "11.2.0",
19+
"@progress/kendo-theme-material": "11.2.0",
20+
"@progress/kendo-theme-utils": "11.2.0",
2121
"@progress/wct-a11y-spec": "^2.0.9",
2222
"@rollup/plugin-node-resolve": "^13.3.0",
2323
"@rollup/plugin-virtual": "^2.1.0",

0 commit comments

Comments
 (0)