Skip to content

Commit 7f2981d

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 0bd1ee9 commit 7f2981d

File tree

18 files changed

+1289
-293
lines changed

18 files changed

+1289
-293
lines changed

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

Lines changed: 10 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ The effect(s) to use when playing the open animation. Multiple effects should be
101101

102102
The duration of the open animation in milliseconds.
103103

104-
### ARIATemplate `String`*(default: "Current focused #=data.valueType# is #=data.text#")*
104+
### ARIATemplate `String`*(default: "Current focused ${valueType} is ${text}")*
105105

106106
Specifies a template used to populate the value of the aria-label attribute of the currently focused cell of the calendar. The parameters available for the template are:
107107

@@ -114,7 +114,7 @@ The duration of the open animation in milliseconds.
114114
<input id="datepicker" />
115115
<script>
116116
$("#datepicker").kendoDatePicker({
117-
ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
117+
ARIATemplate: ({ current }) => `Date: ${kendo.toString(current, 'G')}`
118118
});
119119
</script>
120120

@@ -179,15 +179,11 @@ Specifies a list of dates, which will be passed to the [month content](/api/java
179179

180180
<input id="datepicker" />
181181

182-
<script id="cell-template" type="text/x-kendo-template">
183-
<span class="#= isInArray(data.date, data.dates) ? 'party' : '' #">#= data.value #</span>
184-
</script>
185-
186182
<script>
187183
$("#datepicker").kendoDatePicker({
188184
value: new Date(2000, 10, 1),
189185
month: {
190-
content: $("#cell-template").html()
186+
content: ({ date, dates, value }) => `<span class="${isInArray(date, dates) ? 'party' : '' }">${value}</span>`
191187
},
192188
dates: [
193189
new Date(2000, 10, 10),
@@ -283,24 +279,12 @@ note that a check for an empty `date` is needed, as the widget can work with a n
283279

284280
The [template](/api/javascript/kendo/methods/template) which renders the footer of the calendar. If false, the footer will not be rendered.
285281

286-
#### Example - specify footer template as a function
287-
288-
<input id="datepicker" />
289-
<script id="footer-template" type="text/x-kendo-template">
290-
Today - #: kendo.toString(data, "d") #
291-
</script>
292-
<script>
293-
$("#datepicker").kendoDatePicker({
294-
footer: kendo.template($("#footer-template").html())
295-
});
296-
</script>
297-
298-
#### Example - specify footer template as a string
282+
#### Example - specify footer template as a string literal
299283

300284
<input id="datepicker" />
301285
<script>
302286
$("#datepicker").kendoDatePicker({
303-
footer: "Today - #: kendo.toString(data, 'd') #"
287+
footer: (data) => `Today - ${kendo.htmlEncode(kendo.toString(data, 'd'))}`
304288
});
305289
</script>
306290

@@ -481,7 +465,7 @@ Templates for the cells rendered in the calendar "month" view.
481465

482466
The template to be used for rendering the cells in "month" view, which are between the min/max range.
483467

484-
#### Example - specify cell template as a string
468+
#### Example - specify cell template as a string literal
485469

486470
<style>
487471
.exhibition{color:blue}
@@ -490,14 +474,10 @@ The template to be used for rendering the cells in "month" view, which are betwe
490474

491475
<input id="datepicker" />
492476

493-
<script id="cell-template" type="text/x-kendo-template">
494-
<span class="#= data.value < 10 ? 'exhibition' : 'party' #">#= data.value #</span>
495-
</script>
496-
497477
<script>
498478
$("#datepicker").kendoDatePicker({
499479
month: {
500-
content: $("#cell-template").html()
480+
content: (data) => `<span class="${data.value < 10 ? 'exhibition' : 'party'}">${data.value}</span>`
501481
}
502482
});
503483
</script>
@@ -522,14 +502,12 @@ The template to be used for rendering the cells in "month" view, which are betwe
522502
<body>
523503

524504
<input id="datepicker1" />
525-
<script id="week-template" type="text/x-kendo-template">
526-
<a class="italic">#= data.weekNumber #</a>
527-
</script>
505+
528506
<script>
529507
$("#datepicker1").kendoDatePicker({
530508
weekNumber: true,
531509
month: {
532-
weekNumber: $("#week-template").html()
510+
weekNumber: ({ weekNumber }) => `<a class="italic">${weekNumber}</a>`
533511
}
534512
});
535513
</script>
@@ -555,7 +533,7 @@ The template used for rendering cells in the "month" view, which are outside the
555533
<script>
556534
$("#datepicker2").kendoDatePicker({
557535
month: {
558-
empty: '<span style="color:\\#ccc;padding:0 .45em 0 .1em;">#= data.value #</span>'
536+
empty: ({ value }) => `<span style="color:#ccc;padding:0 .45em 0 .1em;">${value}</span>`
559537
}
560538
});
561539
</script>

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

Lines changed: 13 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -434,11 +434,12 @@ The [template](/api/javascript/kendo/methods/template) used to render the fixed
434434

435435
<input id="customers" style="width: 400px" />
436436
<script>
437+
let encode = kendo.htmlEncode;
437438
$(document).ready(function() {
438439
$("#customers").kendoDropDownList({
439440
dataTextField: "ContactName",
440441
dataValueField: "CustomerID",
441-
fixedGroupTemplate: "Fixed group: #: data #",
442+
fixedGroupTemplate: (data) => `Fixed group: ${encode(data)}`,
442443
height: 400,
443444
dataSource: {
444445
type: "odata",
@@ -465,14 +466,15 @@ The widget instance.
465466

466467
<input id="dropdownlist" />
467468
<script>
469+
let encode = kendo.htmlEncode;
468470
$("#dropdownlist").kendoDropDownList({
469471
dataSource: [
470472
{ id: 1, name: "Apples" },
471473
{ id: 2, name: "Oranges" }
472474
],
473475
dataTextField: "name",
474476
dataValueField: "id",
475-
footerTemplate: 'Total <strong>#: instance.dataSource.total() #</strong> items found'
477+
footerTemplate: ({ instance }) => `Total <strong>${encode(instance.dataSource.total())}</strong> items found`
476478
});
477479
</script>
478480

@@ -582,11 +584,12 @@ The [template](/api/javascript/kendo/methods/template) used to render the groups
582584

583585
<input id="customers" style="width: 400px" />
584586
<script>
587+
let encode = kendo.htmlEncode;
585588
$(document).ready(function() {
586589
$("#customers").kendoDropDownList({
587590
dataTextField: "ContactName",
588591
dataValueField: "CustomerID",
589-
groupTemplate: "Group: #: data #",
592+
groupTemplate: (data) => `Group: ${encode(data)}`,
590593
height: 400,
591594
dataSource: {
592595
type: "odata",
@@ -988,76 +991,39 @@ Specifies a static HTML content, which will be rendered as a header of the popup
988991

989992
The [template](/api/javascript/kendo/methods/template) used to render the items. By default the widget displays only the text of the data item (configured via `dataTextField`).
990993

991-
#### Example - specify template as a function
992-
993-
<input id="dropdownlist" />
994-
<script id="template" type="text/x-kendo-template">
995-
<span>
996-
<img src="/img/#: id #.png" alt="#: name #" />
997-
#: name #
998-
</span>
999-
</script>
1000-
<script>
1001-
$("#dropdownlist").kendoDropDownList({
1002-
dataSource: [
1003-
{ id: 1, name: "Apples" },
1004-
{ id: 2, name: "Oranges" }
1005-
],
1006-
dataTextField: "name",
1007-
dataValueField: "id",
1008-
template: kendo.template($("#template").html())
1009-
});
1010-
</script>
1011-
1012-
#### Example - specify template as a string
994+
#### Example - specify template as a string literal
1013995

1014996
<input id="dropdownlist" />
1015997
<script>
998+
let encode = kendo.htmlEncode;
1016999
$("#dropdownlist").kendoDropDownList({
10171000
dataSource: [
10181001
{ id: 1, name: "Apples" },
10191002
{ id: 2, name: "Oranges" }
10201003
],
10211004
dataTextField: "name",
10221005
dataValueField: "id",
1023-
template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'
1006+
template: ({ id, name }) => `<span><img src="/img/${id}.png" alt="${name}" />${name}</span>`
10241007
});
10251008
</script>
10261009

10271010
### valueTemplate `String|Function`
10281011

10291012
The [valueTemplate](/api/javascript/kendo/methods/template) used to render the selected value. By default the widget displays only the text of the data item (configured via `dataTextField`).
10301013

1031-
#### Example - specify valueTemplate as a function
1032-
1033-
<input id="dropdownlist" />
1034-
<script id="valueTemplate" type="text/x-kendo-template">
1035-
<strong>#: name #</strong>
1036-
</script>
1037-
<script>
1038-
$("#dropdownlist").kendoDropDownList({
1039-
dataSource: [
1040-
{ id: 1, name: "Apples" },
1041-
{ id: 2, name: "Oranges" }
1042-
],
1043-
dataTextField: "name",
1044-
dataValueField: "id",
1045-
valueTemplate: kendo.template($("#valueTemplate").html())
1046-
});
1047-
</script>
1048-
1049-
#### Example - specify template as a string
1014+
#### Example - specify template as a string literal
10501015

10511016
<input id="dropdownlist" />
10521017
<script>
1018+
let encode = kendo.htmlEncode;
10531019
$("#dropdownlist").kendoDropDownList({
10541020
dataSource: [
10551021
{ id: 1, name: "Apples" },
10561022
{ id: 2, name: "Oranges" }
10571023
],
10581024
dataTextField: "name",
10591025
dataValueField: "id",
1060-
valueTemplate: '<strong>#: name #</strong>'
1026+
valueTemplate: ({ name }) => '<strong>${encode(name)}</strong>'
10611027
});
10621028
</script>
10631029

@@ -1173,7 +1139,7 @@ The widget will pass the selected value(s) in the `valueMapper` function. In tur
11731139
<script>
11741140
$(document).ready(function() {
11751141
$("#orders").kendoDropDownList({
1176-
template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
1142+
template: ({ OrderID, ShipName, ShipCountry }) => `<span class="order-id">${OrderID}</span> ${ShipName}, ${ShipCountry}`,
11771143
dataTextField: "ShipName",
11781144
dataValueField: "OrderID",
11791145
filter: "contains",

0 commit comments

Comments
 (0)