Skip to content

Commit dc82827

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 6847af7 commit dc82827

26 files changed

+1192
-31
lines changed

‎docs-aspnet-core/knowledge-base/validator-basic-form-validation.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Validate a Form by Using the Validator TagHelper
3+
description: An example on how to validate a form by using the Telerik UI .Net Core Validator TagHelper.
4+
type: how-to
5+
page_title: Validate a From with the Validator TagHelper | UI for ASP.NET Core
6+
slug: validator-basic-form-validation
7+
tags: aspnet, core, dotnet-core, kendo, kendo-ui, form, validation
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>Progress Telerik UI for ASP.NET Core</td>
17+
</tr>
18+
</table>
19+
20+
21+
## Description
22+
23+
How can I create validate a form by using the UI for ASP.NET Core Validator TagHelper?
24+
25+
## Solution
26+
27+
For the complete implementation on how to create a form that contains Telerik UI components and then validate it by using the Telerik UI for ASP.NET Core Validator TagHelper, refer to [this ASP.NET Core Demo](https://demos.telerik.com/aspnet-core/validator/index).
28+
29+
## See Also
30+
31+
* [Validator TagHelper Overview](https://docs.telerik.com/aspnet-core/tag-helpers/editors/validator/overview)

‎docs/api/javascript/ui/switch.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,25 @@ Whether to enable or disable the widget.
194194
switchInstance.enable(false);
195195
</script>
196196

197+
### readonly
198+
199+
Changes the readonly state of the widget.
200+
201+
#### Parameters
202+
203+
##### readonly `Boolean`
204+
205+
Whether to make the widget readonly.
206+
207+
#### Example
208+
209+
<input id="switch" />
210+
211+
<script>
212+
var switchInstance = $("#switch").kendoSwitch().data("kendoSwitch");
213+
switchInstance.readonly(true);
214+
</script>
215+
197216
## Events
198217

199218
### change

‎docs/controls/editors/switch/how-to/enable-dragging.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ The following example demonstrates how to enable dragging of the drag handle. Th
1111

1212
###### Example
1313

14-
```html
14+
```dojo
1515
<input type="checkbox" id="switch" />
1616
1717
<script>

‎docs/controls/editors/switch/how-to/indeterminate.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ The following example demonstrates how to set an indeterminate state of the Kend
1111

1212
###### Example
1313

14-
```html
14+
```dojo
1515
<style>
1616
.k-indeterminate .k-switch-container {
1717
background-color: #dfdfdf !important;

‎docs/intro/supporting/scripts-editors.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,9 @@ Below are listed the script files for the Kendo UI Editors widgets.&nbsp;&nbsp;
144144
| | kendo.userevents.js | |
145145
| | kendo.draganddrop.js | |
146146
| | kendo.slider.js | |
147+
| [Switch](http://demos.telerik.com/kendo-ui/switch/index) | jquery.js | |
148+
| | kendo.core.js | |
149+
| | kendo.switch.js | |
147150
| [TimePicker](http://demos.telerik.com/kendo-ui/timepicker/index) | jquery.js | |
148151
| | kendo.core.js | |
149152
| | kendo.popup.js | |

‎docs/jsp/tags/switch/overview.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ Below are listed the steps for you to follow when configuring the Kendo UI Switc
4040

4141
###### Example
4242

43-
<kendo:switch name="switch">
44-
</kendo:switch>
43+
<kendo:switchButton name="switch">
44+
</kendo:switchButton>
4545

4646
## Event Handling
4747

@@ -51,14 +51,14 @@ You can subscribe to all [events exposed by Kendo UI Switch](/api/javascript/ui/
5151

5252
###### Example
5353

54-
<kendo:switch name="switch" change="switchOnChange">
55-
</kendo:switch>
54+
<kendo:switchButton name="switch" change="switchOnChange">
55+
</kendo:switchButton>
5656

57-
<script>
58-
function switchOnChange(e) {
59-
kendoConsole.log("Change :: checked: " + e.checked);
60-
}
61-
</script>
57+
<script>
58+
function switchOnChange(e) {
59+
kendoConsole.log("Change :: checked: " + e.checked);
60+
}
61+
</script>
6262

6363
## Reference
6464

‎docs/php/widgets/switch/overview.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ The example below demonstrates how to subscribe to events by providing inline Ja
7373
echo $switchButton->render();
7474
?>
7575

76-
<!--*-->
7776
## Reference
7877

7978
### Client-Side Instances

‎styles/web/Default/switch/_layout.less‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
// Switch
2+
3+
.k-switch {
4+
border-radius: @switch-border-radius;
5+
cursor: pointer;
6+
width: @switch-size;
7+
background: none;
8+
border: 0;
9+
outline: 0;
10+
box-shadow: none;
11+
display: inline-flex;
12+
overflow: hidden;
13+
vertical-align: middle;
14+
font-size: @switch-font-size;
15+
user-select: none;
16+
text-align: left;
17+
18+
[type='checkbox'] {
19+
display: none;
20+
}
21+
}
22+
23+
.k-switch,
24+
.k-switch-container,
25+
.k-switch-handle {
26+
box-sizing: border-box;
27+
}
28+
29+
.k-switch-container {
30+
border-radius: @switch-border-radius;
31+
padding: @switch-container-padding-y @switch-container-padding-x;
32+
border-width: @switch-container-border-width;
33+
border-style: solid;
34+
flex: 1 0 auto;
35+
position: relative;
36+
outline: 0;
37+
transition: background-color 200ms ease-out 0s;
38+
}
39+
40+
.k-switch-handle {
41+
border-radius: @switch-handle-border-radius;
42+
width: @switch-handle-size;
43+
height: @switch-handle-size;
44+
border-width: @switch-handle-border-width;
45+
border-style: solid;
46+
background-position: 50%;
47+
display: inline-block;
48+
vertical-align: middle;
49+
position: relative;
50+
left: 0;
51+
transition: left 200ms ease-out 0s;
52+
53+
.k-ie11 & {
54+
display: block;
55+
}
56+
}
57+
58+
.k-switch-on .k-switch-handle {
59+
left: @switch-on-left-x;
60+
61+
.k-ie &,
62+
.k-edge & {
63+
left: 100%;
64+
margin-left: -@switch-handle-size;
65+
}
66+
}
67+
68+
.k-switch-off .k-switch-handle {
69+
left: 0;
70+
}
71+
72+
.k-switch-label-on,
73+
.k-switch-label-off {
74+
display: @switch-label-display;
75+
width: @switch-label-width;
76+
position: absolute;
77+
top: 50%;
78+
transform: translateY(-50%);
79+
text-shadow: none;
80+
line-height: @switch-handle-size;
81+
overflow: hidden;
82+
}
83+
84+
.k-switch-label-on {
85+
text-align: left;
86+
left: @switch-label-position;
87+
}
88+
89+
.k-switch-label-off {
90+
text-align: right;
91+
right: @switch-label-position;
92+
}
93+
94+
.k-switch when not (@switch-track-size = null) {
95+
overflow: visible;
96+
97+
.k-switch-container {
98+
height: @switch-track-size;
99+
}
100+
101+
.k-switch-handle {
102+
top: calc((@switch-track-size - @switch-handle-size - @switch-container-border-width * 2) * .5);
103+
}
104+
}
105+
106+
.k-rtl .k-switch,
107+
.k-switch[dir = "rtl"] {
108+
&.k-switch-on .k-switch-handle {
109+
left: 0;
110+
}
111+
112+
&.k-switch-off .k-switch-handle {
113+
left: @switch-on-left-x;
114+
}
115+
.k-switch-label-on {
116+
text-align: right;
117+
left: initial;
118+
right: @switch-label-position;
119+
}
120+
.k-switch-label-off {
121+
text-align: left;
122+
left: @switch-label-position;
123+
right: initial;
124+
}
125+
}

0 commit comments

Comments
 (0)