Skip to content

Commit 39ff085

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 0e9591e commit 39ff085

12 files changed

+418
-23
lines changed

‎docs/api/javascript/timezone.md‎

Lines changed: 78 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,20 @@ The timezone.
3030

3131
#### Example
3232

33+
<script>
34+
// include kendo.timezones.js
35+
var version = kendo.version;
36+
37+
$('<script/>', {
38+
type:'text/javascript',
39+
src:'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js'
40+
}).appendTo('head');
41+
</script>
42+
3343
<script>
3444
var targetDate = new Date(2016,10,5,15,25,11);
3545
var timeZoneOffset = kendo.timezone.offset(targetDate,"Europe/Sofia");
46+
3647
console.log(timeZoneOffset); //-120
3748
</script>
3849

@@ -60,12 +71,23 @@ The `'to'` offset represented as minutes (that is, the `Number` type) or timezon
6071

6172
#### Example
6273

74+
<script>
75+
// include kendo.timezones.js
76+
var version = kendo.version;
77+
78+
$('<script/>', {
79+
type:'text/javascript',
80+
src:'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js'
81+
}).appendTo('head');
82+
</script>
83+
6384
<script>
6485
var targetDate = new Date(2016,10,5,15,25,11);
6586
var convertedDate1 = kendo.timezone.convert(targetDate, "Etc/GMT+2", "Etc/GMT-6");
66-
var convertedDate2 = kendo.timezone.convert(targetDate, 120, -360);
67-
console.log(convertedDate1); // Sat Nov 05 2016 23:25:11 GMT+0200 (FLE Standard Time)
68-
console.log(convertedDate2); // Sat Nov 05 2016 23:25:11 GMT+0200 (FLE Standard Time)
87+
var convertedDate2 = kendo.timezone.convert(targetDate, 120, -360);
88+
89+
console.log(convertedDate1); // Sat Nov 05 2016 23:25:11 GMT+0200 (FLE Standard Time);
90+
console.log(convertedDate2); // Sat Nov 05 2016 23:25:11 GMT+0200 (FLE Standard Time);
6991
</script>
7092

7193
### apply
@@ -88,12 +110,23 @@ The offset represented as minutes (that is, the `Number` type) or timezone (that
88110

89111
#### Example
90112

113+
<script>
114+
// include kendo.timezones.js
115+
var version = kendo.version;
116+
117+
$('<script/>', {
118+
type:'text/javascript',
119+
src:'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js'
120+
}).appendTo('head');
121+
</script>
122+
91123
<script>
92124
var targetDate = new Date(2016,10,5,15,25,11);
93125
var convertedDate1 = kendo.timezone.apply(targetDate, "Etc/GMT-6");
94-
var convertedDate2 = kendo.timezone.apply(targetDate, -360);
95-
console.log(convertedDate1); // Sat Nov 05 2016 23:25:11 GMT+0200 (FLE Standard Time)
96-
console.log(convertedDate2); // Sat Nov 05 2016 23:25:11 GMT+0200 (FLE Standard Time)
126+
var convertedDate2 = kendo.timezone.apply(targetDate, -360);
127+
128+
console.log(convertedDate1); // Sat Nov 05 2016 23:25:11 GMT+0200 (FLE Standard Time);
129+
console.log(convertedDate2); // Sat Nov 05 2016 23:25:11 GMT+0200 (FLE Standard Time);
97130
</script>
98131

99132
### remove
@@ -116,12 +149,23 @@ The offset represented as minutes (that is, the `Number` type) or timezone (that
116149

117150
#### Example
118151

152+
<script>
153+
// include kendo.timezones.js
154+
var version = kendo.version;
155+
156+
$('<script/>', {
157+
type:'text/javascript',
158+
src:'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js'
159+
}).appendTo('head');
160+
</script>
161+
119162
<script>
120163
var targetDate = new Date(2016,10,5,15,25,11);
121164
var convertedDate1 = kendo.timezone.remove(targetDate, "Etc/GMT-6");
122-
var convertedDate2 = kendo.timezone.remove(targetDate, -360);
123-
console.log(convertedDate1); // Sat Nov 05 2016 11:25:11 GMT+0200 (FLE Standard Time)
124-
console.log(convertedDate2); // Sat Nov 05 2016 11:25:11 GMT+0200 (FLE Standard Time)
165+
var convertedDate2 = kendo.timezone.remove(targetDate, -360);
166+
167+
console.log(convertedDate1); // Sat Nov 05 2016 11:25:11 GMT+0200 (FLE Standard Time);
168+
console.log(convertedDate2); // Sat Nov 05 2016 11:25:11 GMT+0200 (FLE Standard Time);
125169
</script>
126170

127171
### abbr
@@ -144,6 +188,16 @@ The name of the particular timezone that will be used to get the abbreviation of
144188

145189
#### Example
146190

191+
<script>
192+
// include kendo.timezones.js
193+
var version = kendo.version;
194+
195+
$('<script/>', {
196+
type:'text/javascript',
197+
src:'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js'
198+
}).appendTo('head');
199+
</script>
200+
147201
<script>
148202
var targetDate = new Date(2016,10,5,15,25,11);
149203
var abbr = kendo.timezone.abbr(targetDate, "Europe/Sofia");
@@ -166,11 +220,22 @@ The date, represented as a date object or milliseconds, that will be converted t
166220

167221
#### Example
168222

223+
<script>
224+
// include kendo.timezones.js
225+
var version = kendo.version;
226+
227+
$('<script/>', {
228+
type:'text/javascript',
229+
src:'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js'
230+
}).appendTo('head');
231+
</script>
232+
169233
<script>
170234
var targetDate = new Date(2016,10,5,15,25,11);
171-
var targetMilliseconds = 1478352311000;
235+
var targetMilliseconds = 1478352311000;
172236
var localeDateFromDate = kendo.timezone.toLocalDate(targetDate);
173-
var localeDateFromMs = kendo.timezone.toLocalDate(targetMilliseconds);
174-
console.log(localeDateFromDate); // Sat Nov 05 2016 13:25:11 GMT+0200 (FLE Standard Time)
175-
console.log(localeDateFromMs); // Sat Nov 05 2016 13:25:11 GMT+0200 (FLE Standard Time)
237+
var localeDateFromMs = kendo.timezone.toLocalDate(targetMilliseconds);
238+
239+
console.log(localeDateFromDate); // Sat Nov 05 2016 13:25:11 GMT+0200 (FLE Standard Time);
240+
console.log(localeDateFromMs); // Sat Nov 05 2016 13:25:11 GMT+0200 (FLE Standard Time);
176241
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1159,7 +1159,7 @@ The event handler function context (available via the `this` keyword) will be se
11591159
],
11601160
dataBinding: function(e) {
11611161
// call e.preventDefault() if you want to cancel binding.
1162-
console.log("ListView is ready to bind to data").
1162+
console.log("ListView is ready to bind to data");
11631163
}
11641164
});
11651165
</script>

‎docs/knowledge-base/combobox-placeholder-change-programmatic-attribute.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: Change Placeholder Text after Initialization
3+
description: An example demonstrating how to change the placeholder text of a Kendo UI ComboBox
4+
type: how-to
5+
page_title: Configure the Placeholder Attribute | Kendo UI ComboBox
6+
slug: combobox-placeholder-change-programmatic-attribute
7+
tags: combobox, placeholder, change, programmatic, attribute, initialization
8+
ticketid: 1411783
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>ComboBox for Progress® Kendo UI®</td>
17+
</tr>
18+
19+
<td>Product Version</td>
20+
<td>2019.2.514</td>
21+
</tr>
22+
</table>
23+
24+
## Description
25+
26+
How can I change the placeholder text of a Kendo UI ComboBox after it has already been initialized?
27+
28+
## Solution
29+
30+
To set the text of the Kendo UI ComboBox's placeholder, refer to its [input element](https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/fields/input) and change the [placeholder attribute using jQuery](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute).
31+
32+
```javascript
33+
var comboBox = $("#combobox").data("kendoComboBox");
34+
$(comboBox.input).attr('placeholder', '--select--');
35+
```
36+
37+
```dojo
38+
<input id="combobox" />
39+
<script>
40+
$(document).ready(function () {
41+
42+
$("#combobox").kendoComboBox({
43+
placeholder: "Select..."
44+
});
45+
46+
var comboBox = $("#combobox").data("kendoComboBox");
47+
$(comboBox.input).attr('placeholder', '--select--');
48+
49+
});
50+
</script>
51+
```
52+
53+
## See Also
54+
55+
* [input - Documentation and API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/fields/input)
56+
* [placeholder attribute - MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute)

‎docs/knowledge-base/datepicker-datetimepicker-calendar-weeknumber-template-year.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: WeekNumber and Year in Calendar Month View
3+
description: An example demonstrating how to add a week number template in the calendar month view
4+
type: how-to
5+
page_title: Add Year to Week Number Template | Kendo UI DateTimePicker
6+
slug: datepicker-datetimepicker-calendar-weeknumber-template-year
7+
tags: datepicker, datetimepicker, weeknumber, template, year, week, number, calendar
8+
ticketid: 1409114
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>DatePicker for Progress® Kendo UI®, DateTimePicker for Progress® Kendo UI®, Calendar for Progress® Kendo UI® </td>
17+
</tr>
18+
19+
<td>Product Version</td>
20+
<td>2019.2.514</td>
21+
</tr>
22+
</table>
23+
24+
## Description
25+
26+
How can I format the weekNumber section in the calendar to include the year in the Kendo UI DatePicker, DateTimePicker, or Calendar?
27+
28+
## Solution
29+
30+
The weekNumber can be formatted in the [month.weekNumber configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/configuration/month#monthweeknumber) using a template. There are two properties which can help modify its appearance: **currentDate** and **weekNumber**.
31+
32+
```javascript
33+
<script id="week-template" type="text/x-kendo-template">
34+
<a>#= data.weekNumber # - #= getYearFromWeekNumber(data) #</a>
35+
</script>
36+
```
37+
38+
To handle the last and first week of a year from being one year behind, create a custom function which will return the correct year.
39+
40+
```javascript
41+
function getYearFromWeekNumber(data) {
42+
var year = data.currentDate.getFullYear();
43+
if (data.weekNumber == 1 && data.currentDate.getMonth() == 11) {
44+
year++;
45+
}
46+
return year;
47+
}
48+
```
49+
50+
Finally, modify the CSS based on your preferences of the weekNumber column so it is wide enough for the content.
51+
52+
```CSS
53+
.k-calendar .k-content .k-alt {
54+
width: 70px;
55+
}
56+
```
57+
58+
```dojo
59+
<style>
60+
.k-calendar .k-content .k-alt {
61+
width: 70px;
62+
}
63+
</style>
64+
<input id="datepicker1" />
65+
66+
<script id="week-template" type="text/x-kendo-template">
67+
<a>#= data.weekNumber # - #= getYearFromWeekNumber(data) #</a>
68+
</script>
69+
70+
<script>
71+
function getYearFromWeekNumber(data) {
72+
var year = data.currentDate.getFullYear();
73+
if (data.weekNumber == 1 && data.currentDate.getMonth() == 11) {
74+
year++;
75+
}
76+
return year;
77+
}
78+
79+
$("#datepicker1").kendoDatePicker({
80+
weekNumber: true,
81+
month: {
82+
// template for dates in month view
83+
weekNumber: $("#week-template").html()
84+
},
85+
});
86+
</script>
87+
```
88+
89+
## See Also
90+
91+
* [month.weekNumber - DatePicker - Documentation and API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/configuration/month#monthweeknumber)
92+
* [month.weekNumber - DateTimePicker - Documentation and API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker/configuration/month#monthweeknumber)
93+
* [month.weekNumber - Calendar - Documentation and API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar/configuration/month#monthweeknumber)

‎docs/knowledge-base/numerictextbox-arrows-not-in-wrong-position.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: Fix Position of Arrows in Kendo UI NumericTextBox
3+
description: An example demonstrating how to fix position of arrows
4+
type: how-to
5+
page_title: Fix Arrows Not Centered | Kendo UI NumericTextBox
6+
slug: numerictextbox-arrows-not-in-wrong-position
7+
tags: numerictextbox, arrows, not, in, wrong, position, style, textbox, k-textbox
8+
ticketid: 1405455
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>NumericTextBox for Progress® Kendo UI®</td>
17+
</tr>
18+
19+
<td>Product Version</td>
20+
<td>2019.2.514</td>
21+
</tr>
22+
</table>
23+
24+
## Description
25+
26+
The Kendo UI NumericTextBox's arrows appear to be shifted in the wrong location. How can I adjust them to be centered as expected?
27+
```dojo
28+
<input id="numeric" class="k-textbox" />
29+
30+
<script>
31+
$(document).ready(function() {
32+
33+
$("#numeric").kendoNumericTextBox({
34+
min: 0,
35+
max: 100,
36+
value: 1,
37+
format:"n0",
38+
});
39+
40+
});
41+
</script>
42+
```
43+
44+
## Solution
45+
46+
A common reason for the arrows to be misplaced is due to the inclusion of the **k-textbox** class in the input element. By removing the class, the Kendo UI NumericTextBox's appearance will be fixed.
47+
48+
```dojo
49+
<input id="numeric" />
50+
51+
<script>
52+
$(document).ready(function() {
53+
54+
$("#numeric").kendoNumericTextBox({
55+
min: 0,
56+
max: 100,
57+
value: 1,
58+
format:"n0",
59+
});
60+
61+
});
62+
</script>
63+
```

0 commit comments

Comments
 (0)