Skip to content

Commit e7c5c77

Browse files
author
User Jenkins
committed
Sync with Kendo UI Professional
1 parent 02e470b commit e7c5c77

File tree

7 files changed

+1687
-4
lines changed

7 files changed

+1687
-4
lines changed

‎docs-aspnet/html-helpers/layout/tooltip/overview.md‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ The following example demonstrates how to define the Tooltip by using the Toolti
3434
The following example demonstrates the basic configuration of the Tooltip HtmlHelper.
3535

3636
```
37-
<span id="tooltip" class="k-button wider">
38-
<а href="#">Hover me</a>
39-
</span>
37+
<span id="tooltip" class="k-button wider">
38+
<a href="#">Hover me</a>
39+
</span>
4040
41-
@(Html.Kendo().Tooltip()
41+
@(Html.Kendo().Tooltip()
4242
.For("#tooltip")
4343
.Position(TooltipPosition.Top)
4444
.Content("Hello!")
@@ -47,6 +47,17 @@ The following example demonstrates the basic configuration of the Tooltip HtmlHe
4747
.Filter("a")
4848
.Events(events => events.Hide("onHide").Show("onShow"))
4949
)
50+
51+
<script>
52+
53+
function onHide() {
54+
// Hide Event function handler
55+
}
56+
57+
function onShow() {
58+
// Show Event function handler
59+
}
60+
</script>
5061
```
5162

5263
## Functionality and Features

‎docs/knowledge-base/buttongroup-on-multiple-rows.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
title: Display ButtonGroup On Multiple Rows
3+
page_title: Display ButtonGroup On Multiple Rows | Kendo UI ButtonGroup for jQuery
4+
description: An example on how to display Kendo UI ButtonGroup on multiple rows.
5+
type: how-to
6+
slug: buttongroup-on-multiple-rows
7+
tags: button, buttongroup, multiple, rows
8+
ticketid: 1149689
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>ButtonGroup for Progress® Kendo UI®</td>
18+
</tr>
19+
</table>
20+
21+
## Description
22+
23+
How can I display the buttons in the ButtonGroup on multiple rows?
24+
25+
## Solution
26+
27+
Use the `flex` property to change the rendering of the buttons in the ButtonGroup.
28+
29+
```dojo
30+
<style>
31+
#select-period{
32+
display: flex;
33+
flex-flow: row wrap;
34+
align-content: flex-start;
35+
height: 180px;
36+
width: 420px;
37+
}
38+
.k-button-group .k-button+.k-button {
39+
margin: 0;
40+
}
41+
.k-button {
42+
flex: 21%;
43+
}
44+
.firstLeftRadius {
45+
border-top-left-radius: 4px !important;
46+
border-bottom-left-radius: 0px !important;
47+
}
48+
.firstRightRadius {
49+
border-top-right-radius: 4px !important;
50+
}
51+
.lastLeftRadius {
52+
border-bottom-left-radius: 4px !important;
53+
}
54+
.lastRightRadius {
55+
border-top-right-radius: 0px !important;
56+
border-bottom-right-radius: 4px !important;
57+
}
58+
</style>
59+
<div id="example">
60+
<div class="demo-section k-content">
61+
<div id="select-period">
62+
<span class="firstLeftRadius">
63+
1 @
64+
</span>
65+
<span>
66+
2abc
67+
</span>
68+
<span>
69+
3def
70+
</span>
71+
<span class="firstRightRadius">
72+
Up
73+
</span>
74+
<span>
75+
4 ghi
76+
</span>
77+
<span>
78+
5 jkl
79+
</span>
80+
<span>
81+
6 mno
82+
</span>
83+
<span>
84+
Down
85+
</span>
86+
<span>
87+
7 pqrs
88+
</span>
89+
<span>
90+
8 tuv
91+
</span>
92+
<span>
93+
9 wxyz
94+
</span>
95+
<span>
96+
Left
97+
</span>
98+
<span class="lastLeftRadius">
99+
Cancel
100+
</span>
101+
<span>
102+
0 (space)
103+
</span>
104+
<span>
105+
Enter
106+
</span>
107+
<span class="lastRightRadius">
108+
Right
109+
</span>
110+
</div>
111+
</div>
112+
</div>
113+
114+
<script>
115+
$(function() {
116+
$("#select-period").kendoButtonGroup();
117+
});
118+
</script>
119+
```
120+
121+
## See Also
122+
123+
* [API Reference of the ButtonGroup](https://docs.telerik.com/kendo-ui/api/javascript/ui/buttongroup)

‎docs/knowledge-base/dropdownlist-screenreaders-read-title.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: How To Make Screen Readers Read Either Label Or Title Of A DropDownList
3+
description: An example on how to make Screen Readers read label or title of a Kendo UI DropDownList.
4+
type: how-to
5+
page_title: Screen Readers Read Title | Kendo UI DropDownList for jQuery
6+
slug: dropdownlist-screenreaders-read-title
7+
tags: dropdownlist, screenreaders, title
8+
ticketid: 1142772
9+
res_type: kb
10+
component: dropdownlist, combobox, multiselect
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tr>
17+
<td>Product</td>
18+
<td>Progress Kendo UI DropDownList</td>
19+
</tr>
20+
</table>
21+
22+
## Description
23+
24+
There are several widgets (DropDownList, ComboBox, MultiSelect, NumericTextBox) which need to be placed inside a label element, as described in [Label Element Support](https://docs.telerik.com/kendo-ui/accessibility/section-508-wcag#label-element-support) help section. Still JAWS, NVDA and ChromeVox read different things, depending with which browser they are used. Some prefer reading a label, others prefer reading a title attribute instead.
25+
26+
How can I make Screen Readers read label or title of a Kendo UI DropDownList?
27+
28+
## Solution
29+
You could add a title attribute which holds the text from the label. JAWS and NVDA would read the title, while ChromeVox reads the label.
30+
31+
```dojo
32+
<label>
33+
Amount:
34+
</label>
35+
<input id="dropdownlist" title=" Title Amount"/>
36+
37+
<script>
38+
$(function() {
39+
$("#dropdownlist").kendoDropDownList();
40+
});
41+
</script>
42+
```

‎docs/knowledge-base/scheduler-prevent-adding-new-events.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: Prevent Adding New Events And Deleting The Exisitng Ones In Scheduler
3+
description: An example on how to prevent adding new events and deleting the existing ones Kendo UI Scheduler.
4+
type: how-to
5+
page_title: Prevent Adding New Events And Deleting The Exisitng Ones | Kendo UI Scheduler for jQuery
6+
slug: scheduler-prevent-adding-new-events
7+
tags: kendo, kendo-ui, scheduler
8+
ticketid: 1110078
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>Progress Kendo UI Scheduler</td>
18+
</tr>
19+
</table>
20+
21+
## Description
22+
23+
I want to allow user to edit the existing events, but I want to prevent adding new events or deleting the existing ones. How can I do that?
24+
25+
## Solution
26+
27+
1. Handle the [`add`](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/events/add) event of the Scheduler and prevent the default behavior.
28+
1. Set [`editable.destroy`](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/editable.destroy) option to `false`.
29+
30+
```dojo
31+
<div id="scheduler"></div>
32+
<script>
33+
$("#scheduler").kendoScheduler({
34+
date: new Date("2021/6/6"),
35+
startTime: new Date("2021/6/6 08:00"),
36+
endTime: new Date("2021/6/6 18:00"),
37+
editable: {
38+
destroy: false
39+
},
40+
add: function(e) {
41+
e.preventDefault();
42+
},
43+
views: [
44+
{ type: "week" }
45+
],
46+
dataSource: [
47+
{
48+
id: 1,
49+
start: new Date("2021/6/6 08:00 AM"),
50+
end: new Date("2021/6/6 09:00 AM"),
51+
title: "Interview 1"
52+
},
53+
{
54+
id: 2,
55+
start: new Date("2021/6/7 12:00 PM"),
56+
end: new Date("2021/6/7 1:00 PM"),
57+
title: "Interview 2"
58+
},
59+
{
60+
id: 3,
61+
start: new Date("2021/6/8 2:00 PM"),
62+
end: new Date("2021/6/8 3:00 PM"),
63+
title: "Interview 3"
64+
}
65+
]
66+
});
67+
</script>
68+
```
69+
70+
## See Also
71+
72+
* [API Reference of the Scheduler](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler)

0 commit comments

Comments
 (0)