Skip to content

Commit d5e1e81

Browse files
committed
Sync with Kendo UI Professional
1 parent 1374e89 commit d5e1e81

File tree

11 files changed

+181
-30
lines changed

11 files changed

+181
-30
lines changed

docs/framework/AngularJS/data-source.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,12 @@ Even though you do not have to always create a `DataSource` object, most Kendo U
2020

2121
The following example contains static local data and demonstrates how to try to update the data source. When you select an item in the Grid, two input fields become available and they are bound to that item's data. Editing the data in the input fields works as expected: the Grid updates.
2222

23-
```dojo
23+
```
24+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
25+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
26+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
27+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
28+
2429
<div ng-app="app" ng-controller="MyCtrl">
2530
<div kendo-grid
2631
k-data-source="gridData"
@@ -66,7 +71,12 @@ However, if you click the **UPDATE FROM CODE** button, nothing appears to happen
6671

6772
**Solution** Create and place in a scope the data source object yourself. Only the `controller` changes while the markup is the same. Use `kendo.data.ObservableArray` to update the data source.
6873

69-
```dojo
74+
```
75+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
76+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
77+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
78+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
79+
7080
<div ng-app="app" ng-controller="MyCtrl">
7181
<div kendo-grid
7282
k-data-source="gridData"

docs/framework/AngularJS/global-events.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@ For example, your project requires you to create a TreeView widget that automati
2424

2525
The following example demonstrates how to listen to the `kendoWidgetCreated` event.
2626

27-
```dojo
27+
```
28+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
29+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
30+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
31+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
32+
2833
<div ng-app="app" ng-controller="MyCtrl">
2934
<div kendo-tree-view="treeWidget" k-options="treeOptions"></div>
3035
</div>
@@ -101,7 +106,12 @@ Browsers render data asynchronously and, therefore, the `kendoRendered` event is
101106

102107
The following example demonstrates how to listen to the `kendoRendered` event.
103108

104-
```dojo
109+
```
110+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
111+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
112+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
113+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
114+
105115
<div ng-app="app" ng-controller="MyCtrl">
106116
<input kendo-datepicker="datePicker">
107117
</div>

docs/framework/AngularJS/introduction.md

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,12 @@ You can reference a widget by using any of the following approaches:
4646

4747
* Getting instances in the `controller`&mdash;To call methods on a widget from your controller, you might sometimes need a reference to the widget. To get such, assign a name to the `kendo-widget-name` attribute.
4848

49-
```dojo
49+
```
50+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
51+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
52+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
53+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
54+
5055
<div ng-app="app" ng-controller="MyCtrl">
5156
<input kendo-datepicker="datePicker" k-on-change="onChange()">
5257
</div>
@@ -61,7 +66,12 @@ You can reference a widget by using any of the following approaches:
6166
6267
* Using the `tag` directive&mdash;As of the Kendo UI Q1 2015 release, if you use the `tag` directive variant, you can set the `k-scope-field` to achieve the same.
6368
64-
```dojo
69+
```
70+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
71+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
72+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
73+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
74+
6575
<div ng-app="app" ng-controller="MyCtrl">
6676
<kendo-date-picker k-scope-field="datePicker" k-on-change="onChange()"></kendo-date-picker>
6777
</div>
@@ -76,7 +86,12 @@ You can reference a widget by using any of the following approaches:
7686
7787
* Setting Options in a Link Function&mdash;As of the Kendo UI Q2 2015 release, the timeout initialization of the widgets is removed. To set the options of a widget as part of the link function of a custom directive, use `k-ng-delay` and `timeout`.
7888
79-
```dojo
89+
```
90+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
91+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
92+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
93+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
94+
8095
<div id="example" ng-app="KendoDemos">
8196
<div class="demo-section k-header" ng-controller="MyCtrl">
8297
<my-custom-directive />

docs/framework/AngularJS/the-grid-widget.md

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@ This article outlines some of the specifics for setting and using the Grid with
2222

2323
AngularJS evaluates a template expression which is placed as [`column.title`](/api/javascript/ui/grid/configuration/columns.title) content. To avoid this behavior, set a [`ng-non-bindable`](https://docs.angularjs.org/api/ng/directive/ngNonBindable) attribute through the [`headerAttributes`](/api/javascript/ui/grid/configuration/columns.headerattributes) so that AngularJS skips the expression evaluation.
2424

25-
```dojo
25+
```
26+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
27+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
28+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
29+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
30+
2631
<div id="example" ng-app="KendoDemos">
2732
<div ng-controller="MyCtrl">
2833
<kendo-grid options="mainGridOptions">
@@ -73,7 +78,12 @@ If you assign a `k-on-change` event handler, it is evaluated in a scope, which c
7378
7479
When the Grid is not in a multiple selection mode, the `data` will be a single data item and not an array and that item will also be accessible as a `dataItem`. When the cell selection is allowed, an additional `columns` variable is present. This variable is an array which contains the indexes of the columns with selected cells. To see what variables are available, choose the selection mode of the Grid and select items from it.
7580

76-
```dojo
81+
```
82+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
83+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
84+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
85+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
86+
7787
<div ng-app="app" ng-controller="MyCtrl">
7888
<label>Select mode: <select kendo-dropdownlist ng-model="gridOptions.selectable">
7989
<option value="row">Row</option>
@@ -122,7 +132,12 @@ If your project requires you to load a column definition from the server, you ne
122132

123133
The following example demonstrates how to dynamically set the Grid columns in AngularJS.
124134

125-
```dojo
135+
```
136+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
137+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
138+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
139+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
140+
126141
<div ng-app="app" ng-controller="MyCtrl">
127142
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions"></div>
128143
</div>
@@ -152,7 +167,12 @@ The Grid supports templates that can be customized by the user. To completely cu
152167

153168
The following example demonstrates how to set the Grid row template (`rowTemplate`) by using markup. You can also define it in the Grid `options` object in the same way as when you do not use AngularJS.
154169

155-
```dojo
170+
```
171+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
172+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
173+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
174+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
175+
156176
<div ng-app="app" ng-controller="MyCtrl">
157177
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions">
158178
<table>
@@ -195,7 +215,13 @@ When you use aggregates, the `column` and `aggregate` information becomes availa
195215
196216
The following example demonstrates how to use the `sum` aggregate in a `footerTemplate` and a `groupFooterTemplate`, and apply an Angular currency pipe to it.
197217

198-
```dojo
218+
```
219+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
220+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
221+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
222+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
223+
224+
199225
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
200226
201227
<div id="example" ng-app="KendoDemos">
@@ -249,7 +275,12 @@ To take full control on the logic that performs the request to the server, defin
249275

250276
The following example demonstrates how to use `$http` to bind the Grid.
251277

252-
```dojo
278+
```
279+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
280+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
281+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
282+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
283+
253284
<div ng-app="app" ng-controller="MyCtrl">
254285
<div kendo-grid k-options="gridOptions"></div>
255286
</div>

docs/framework/AngularJS/widget-basics/binding.md

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@ To bind the value of widgets that provide a `value()` method to the AngularJS sc
2222

2323
The following example demonstrates how to bind the input field to the scope variable. When you select a date, the `birthday` variable is set to the value of the input field as a string.
2424

25-
```dojo
25+
```
26+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
27+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
28+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
29+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
30+
2631
<div ng-app="app" ng-controller="MyCtrl">
2732
<label>Birthday: <input kendo-date-picker ng-model="birthday" /></label>
2833
<p>
@@ -42,7 +47,12 @@ If your element is a form field that has a text value, such as `<input>` or `<te
4247
4348
The following example demonstrates how to get the actual `widget.value()` by using `k-ng-model`. The directive will update the `birthday` variable with the selected `Date` object whenever the `change` event is fired.
4449

45-
```dojo
50+
```
51+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
52+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
53+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
54+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
55+
4656
<div ng-app="app" ng-controller="MyCtrl">
4757
<label>Birthday: <input kendo-date-picker k-ng-model="birthday" /></label>
4858
<p>
@@ -67,7 +77,12 @@ Setting the `k-value-primitive` to `false` forces the widget to accept or return
6777

6878
The following example demonstrates how to display the `Chai` option in the MultiSelect as selected with the widget value set to `[{"ProductName":"Chai","ProductID":1}]`.
6979

70-
```dojo
80+
```
81+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
82+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
83+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
84+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
85+
7186
<div ng-app="app" ng-controller="MyCtrl">
7287
<h4>Select product</h4>
7388
<select kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds" k-value-primitive="false"></select>
@@ -99,7 +114,12 @@ When `k-value-primitive` is set to `true`, you can pass an array of primitive va
99114

100115
The following example demonstrates how to display `Chai` and `Mishi Kobe Niku` as selected with the widget value set to `[1,9]`.
101116

102-
```dojo
117+
```
118+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
119+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
120+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
121+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
122+
103123
<div ng-app="app" ng-controller="MyCtrl">
104124
<h4>Select product</h4>
105125
<select kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds" k-value-primitive="true"></select>

docs/framework/AngularJS/widget-basics/delayed-initialization.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,12 @@ The following example demonstrates that the Grid is created only when the `gridO
3939

4040
You can load the widget data with a `$http` call and initialize the widget when the data is available.
4141

42-
```dojo
42+
```
43+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
44+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
45+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
46+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
47+
4348
<div ng-app="app" ng-controller="MyCtrl">
4449
<select kendo-drop-down-list k-options="customOptions" k-ng-delay="customOptions.dataSource"></select>
4550
</div>

docs/framework/AngularJS/widget-basics/events.md

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,12 @@ If you store the whole configuration in the `controller`, add an event handler i
1717

1818
The following example includes a paragraph that uses the Angular `ng-show` directive and which is displayed only after a month is selected. To implement the approach, you need to call the `$scope.$digest()` event handler.
1919

20-
```dojo
20+
```
21+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
22+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
23+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
24+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
25+
2126
<div ng-app="app" ng-controller="MyCtrl">
2227
<input kendo-date-picker k-options="monthPickerConfig" />
2328
<p ng-show="selected">A month was picked</p>
@@ -45,7 +50,12 @@ You can also specify event handlers by using attributes. They require the `k-on-
4550

4651
In the following example, the `kendoEvent` variable is defined in a scope and you have to pass it to the event handler. If you are using the `k-on-` attributes, you do not need to call `$digest()` on the scope because your bindings take care of it.
4752

48-
```dojo
53+
```
54+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
55+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
56+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
57+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
58+
4959
<div ng-app="app" ng-controller="MyCtrl">
5060
<input kendo-date-picker k-on-change="onDateSelected(kendoEvent)" />
5161
<p ng-show="selected">A month was picked</p>
@@ -76,7 +86,12 @@ The `kendoEvent` is also available.
7686

7787
The following example demonstrates how to use some of these local variables.
7888

79-
```dojo
89+
```
90+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
91+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
92+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
93+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
94+
8095
<div id="example" ng-app="KendoDemos">
8196
<div ng-controller="MyCtrl">
8297
<kendo-grid options="mainGridOptions" k-on-change="onChange({ selected: selected },data,dataItem,angularDataItem)">

docs/framework/AngularJS/widget-basics/initialization.md

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@ You can specify any options that are supported by Kendo UI widgets in `element`
2424

2525
The following example demonstrates an important detail&mdash;the `'Increment'` and `'Decrement'` strings are quoted inside the attribute values. Without the single quote inside they are interpreted as variable names and AngularJS-Kendo UI will look for the `$scope.Increment` and `$scope.Decrement` variables. The omission of the quotes is a common error&mdash;that is why AngularJS-Kendo UI emit a warning in the JS console whenever such variables are not found.
2626

27-
```dojo
27+
```
28+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
29+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
30+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
31+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
32+
2833
<div ng-app="app" ng-controller="MyCtrl">
2934
<input kendo-numerictextbox k-min="1" k-max="10" k-up-arrow-text="'Increment'" k-down-arrow-text="'Decrement'">
3035
</div>
@@ -38,7 +43,12 @@ The following example demonstrates an important detail&mdash;the `'Increment'` a
3843

3944
The following example demonstrates how to specify options from the `controller` in AngularJS projects.
4045

41-
```dojo
46+
```
47+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
48+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
49+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
50+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
51+
4252
<div ng-app="app" ng-controller="MyCtrl">
4353
<input kendo-numerictextbox k-min="1" k-max="10" k-up-arrow-text="textUp" k-down-arrow-text="textDown">
4454
</div>
@@ -54,7 +64,12 @@ The following example demonstrates how to specify options from the `controller`
5464

5565
The following example demonstrates how to use declarative attributes for the `array` and `object` configuration options.
5666

57-
```dojo
67+
```
68+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
69+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
70+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
71+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
72+
5873
<div ng-app="app" ng-controller="MyCtrl">
5974
<textarea kendo-editor
6075
k-tools="[
@@ -79,7 +94,12 @@ The following example demonstrates how to store the whole widget configuration i
7994

8095
> If any of the defined attribute options are `undefined`, the widget will not initialize. For example, if the NumericTextBox `k-max` attribute points to a `$scope.maxNumber` field which is `undefined`, it will not initialize.
8196
82-
```dojo
97+
```
98+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
99+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
100+
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
101+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
102+
83103
<div ng-app="app" ng-controller="MyCtrl">
84104
<input kendo-date-picker k-options="monthPickerConfig">
85105
</div>

0 commit comments

Comments
 (0)