Skip to content

Commit bc836d1

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 4e8eb31 commit bc836d1

File tree

4 files changed

+231
-132
lines changed

4 files changed

+231
-132
lines changed

‎docs/framework/mvvm/bindings/custom.md‎

Lines changed: 23 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ To set a custom binding, use the `data-bind` attribute.
2121

2222
To register a custom binding, extend the [`kendo.data.Binder`](/api/javascript/data/binder) object.
2323

24-
The following example demonstrates how to register a one-way binding. As a result, the HTML element is updated when the view-model changes.
24+
The following example demonstrates how to register a one-way binding. As a result, the HTML element is updated when the view-model changes.
2525

2626
```dojo
2727
<p><label><input type="checkbox" data-bind="checked: slideValue" />toggle slideValue</label></p>
@@ -119,35 +119,38 @@ The following example demonstrates how to bind the max value of a Kendo UI Numer
119119
max: 10
120120
});
121121
122-
kendo.bind(document.body, viewModel);
122+
kendo.bind(document.body, viewModel);
123123
</script>
124124
```
125125

126-
## Custom Binding in TypeScript
126+
## Custom Widget Binding in TypeScript
127127

128-
The following example demonstrates how to bind the max value of a Kendo UI NumericTextBox by using the custom widget biding approach. As a result, the widget is updated when the View-Model changes.
128+
The following example demonstrates how to use custom widget binding in TypeScript. It shows how to bind the max value of a Kendo UI NumericTextBox widget. As a result, the widget is updated when the View-Model changes.
129129

130-
```
130+
```html
131131
<input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" />​
132+
```
133+
```ts
134+
/// <reference path="../node_modules/@progress/kendo-ui/index.d.ts" />
132135

133-
// <reference path="jquery.d.ts" />
134-
// <reference path="kendo.all.d.ts" />
135-
136-
module kendo.data.binders.widget {
136+
import * as $ from "jquery";
137+
import "@progress/kendo-ui";
137138

138-
export class max extends kendo.data.Binder {
139-
init(widget, bindings, options) {
139+
$.extend(kendo.data.binders.widget, {
140+
max: kendo.data.Binder.extend({
141+
init(widget: kendo.ui.Widget, bindings: kendo.data.Bindings, options: kendo.data.BinderOptions) {
140142
//call the base constructor
141-
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
142-
}
143-
143+
kendo.data.Binder.fn.init.call(this, widget.element.get(0), bindings, options);
144+
},
144145
refresh() {
145-
var that = this,
146-
value = that.bindings["max"].get(); //get the value from the View-Model
147-
that.element.max(value);
146+
var that = this;
147+
var value = that.bindings["max"].get(); // get the value from the View-Model
148+
var numeric = $(that.element).data("kendoNumericTextBox"); // get the NumeriTextBox widget instance
149+
150+
numeric.max(value); // set the max value for the NumeriTextBox
148151
}
149-
}
150-
}
152+
})
153+
});
151154

152155
class NumericOptions extends kendo.data.ObservableObject {
153156
value = 5;
@@ -160,77 +163,8 @@ The following example demonstrates how to bind the max value of a Kendo UI Numer
160163
}
161164
}
162165

163-
class ViewModel extends kendo.data.ObservableObject {
164-
person = new NumericOptions();
165-
166-
constructor() {
167-
super();
168-
169-
super.init(this);
170-
}
171-
}
172-
173-
$(function () {
174-
var viewModel = new NumericOptions();
175-
176-
kendo.bind(document.body, viewModel);
177-
178-
});
179-
```
180-
181-
## Custom Widget Binding in TypeScript
182-
183-
The following example demonstrates how to use custom widget binding in TypeScript. It shows how to bind the max value of a Kendo UI NumericTextBox widget. As a result, the widget is updated when the View-Model changes.
184-
185-
```
186-
<input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" />​
187-
188-
// <reference path="jquery.d.ts" />
189-
// <reference path="kendo.all.d.ts" />
190-
191-
module kendo.data.binders.widget {
192-
193-
export class max extends kendo.data.Binder {
194-
init(widget, bindings, options) {
195-
//call the base constructor
196-
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
197-
}
198-
199-
refresh() {
200-
var that = this,
201-
value = that.bindings["max"].get(); //get the value from the View-Model
202-
that.element.max(value);
203-
}
204-
}
205-
}
206-
207-
class NumericOptions extends kendo.data.ObservableObject {
208-
value = 5;
209-
max = 10;
210-
211-
constructor() {
212-
super();
213-
214-
super.init(this);
215-
}
216-
}
217-
218-
class ViewModel extends kendo.data.ObservableObject {
219-
person = new NumericOptions();
220-
221-
constructor() {
222-
super();
223-
224-
super.init(this);
225-
}
226-
}
227-
228-
$(function () {
229166
var viewModel = new NumericOptions();
230-
231-
kendo.bind(document.body, viewModel);
232-
233-
});
167+
kendo.bind($("#example"), viewModel);
234168
```
235169

236170
## Breakdown of Code Elements

‎docs/intro/installation/hosting-kendoui.md‎

Lines changed: 88 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,118 @@
11
---
2-
title: Hosting Kendo UI in Your Project
3-
page_title: Hosting Kendo UI in Your Project | Download and Installation | Kendo UI for jQuery
2+
title: Adding Kendo UI in Your Project
3+
page_title: Adding Kendo UI in Your Project | Download and Installation | Kendo UI for jQuery
44
description: "Get started with Kendo UI for jQuery and learn how to host the library in your project by downloading the bundles and adding the CSS and JavaScript references."
55
slug: hosting_kendoui
66
position: 2
77
---
88

9-
# Hosting Kendo UI in Your Project
9+
# Adding Kendo UI in Your Project
1010

11-
To start using the Kendo UI for jQuery and host the library into your project, you need to [download the bundles](#downloading-the-bundles) and then [add the CSS and JavaScript references](#adding-css-and-javascript-references).
11+
To start using the Kendo UI for jQuery and host the library into your project, you need to [download the bundles](#step-1-downloading-the-bundles) and then [add the CSS and JavaScript references](#step-2-referencing-the-needed-css-and-javascript-files-to-your-project).
1212

13-
## Downloading the Bundles
13+
## Step 1: Downloading the Bundles
1414

15-
To download the Kendo UI bundles, go to [https://www.telerik.com/download/kendo-ui](https://www.telerik.com/download/kendo-ui). After the download is complete, your local repository will host the following folders:
15+
To download a Kendo UI bundle, go to [https://www.telerik.com/download/kendo-ui](https://www.telerik.com/download/kendo-ui). When the download completes, here is what each folder inside the downloaded archive has:
1616

1717
|Folders |Contents |
1818
|:--- |:--- |
1919
|`/apptemplates` |The folder contains standalone starter templates. Although they are static HTML files, it is recommended that you open them through a web server instead of directly from the file system. The latter approach breaks all AJAX data requests.|
2020
|`/examples` |Accommodates the quick-start demo files. Although they are static HTML files, it is recommended that you open them through a web server instead of directly from the file system. The latter approach breaks all AJAX data requests.|
21-
|`/js` |Contains the minified JavaScript files.|
21+
|`/js` |Contains the minified JavaScript files needed by Kendo UI to operates.|
22+
|`/license-agreements` |Contains the End User License Agreement that has to be read before installing Kendo UI.|
2223
|`/src` |This folder used to hold the source code files but they are now provided in a separate download package. Access the source code package from the [Downloads section](https://www.telerik.com/account/my-downloads) of your account. Note that the source code is not available to trial users.|
23-
|`/styles` |Consists of the minified CSS files and theme images. The folder also includes the Less files, which can be passed to the compiler, located on the first-level folders inside `styles/folder: styles/web/` and `styles/mobile/`. Note that the Less files are not available to trial users.|
24-
|`/wrappers` |Includes the server-side wrappers. As it is necessary for the UI for ASP.NET MVC, UI for JSP or UI for PHP distributions only, the folder is available in the commercial packages of these versions.|
24+
|`/styles` | This folder contains the definitions of all [SASS](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) and [LESS](https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling)-based themes that Kendo UI provides. |
25+
|`/typescript` |Includes the Kendo UI [TypeScript definitions](https://docs.telerik.com/kendo-ui/third-party/typescript)|
26+
|`/vsdoc` |Includes the files that provide the intellisense |
2527
|`changelog.html` |Provides the Kendo UI release notes.|
2628

27-
## Adding CSS and JavaScript References
29+
To download the commercial version of Kendo UI go to www.telerik.com and login with your credentials. Navigate to the [Downloads section](https://www.telerik.com/account/my-downloads) of your account. Search for Progress® Kendo UI® for jQuery and download the package.
2830

29-
To include the required CSS and JavaScript files:
31+
Based on the preferred technologies, there are also other approaches you can use to add Kendo UI to a project. Here you can find more details about each of them:
32+
* [Installing Kendo UI by Using the CDN Services]({% slug kendoui_cdn_services_installation %})
33+
* [Installing Kendo UI with NPM]({% slug kendoui_npm_packages_kendoui_installation %})
34+
* [Installing Kendo UI with NuGet]({% slug kendoui_nuget_packages %})
35+
36+
## Step 2: Referencing the needed CSS and JavaScript files to your project
37+
38+
To include the required by Kendo UI CSS and JavaScript files first extract the `/js` and `/styles` directories from the downloaded bundle archive. Copy the extracted folders in the root folder of your project. The next step is to include the Kendo UI JavaScript and CSS files in the `head` tag of your main HTML file. As the SASS and LESS-based themes structure is different, below you find two sections discussing the loading of each theme type.
39+
40+
### Including SASS-based themes to your project
41+
42+
Each SASS-based theme is represented by a single CSS file that combines the layout and the styling of the different components. Thus only one CSS file has to be referenced in the project.
43+
44+
The CSS files defining the different Kendo UI SASS themes are as follows:
45+
* Kendo UI Default v.2(kendo.default-v2.min.css)
46+
* Kendo UI Bootstrap v.4(kendo.bootstrap-v4.min.css)
47+
* Kendo UI Material(kendo.material-v2.min.css)
48+
49+
Here is how we can define a Kendo UI project that uses the Kendo UI Default v.2 theme:
50+
51+
<!DOCTYPE html>
52+
<html>
53+
<head>
54+
<title>Welcome to Kendo UI!</title>
55+
<!-- Reference to the selected SASS-based theme -->
56+
<link href="styles/kendo.default-v2.min.css" rel="stylesheet" />
57+
58+
<!-- (Optional) Reference to the RTL(Right-To-Left) CSS file that changes the direction of all Kendo UI widgets. Include this file only if your project will be with Right-To-Left webpage direction. -->
59+
<link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
60+
61+
<!-- Reference to the jQuery library. It is important tha the jQuery file is loaded before the JavaScript file of Kendo UI -->
62+
<script src="js/jquery.min.js"></script>
63+
64+
<!-- Reference to the Kendo UI JavaScript file -->
65+
<script src="js/kendo.all.min.js"></script>
66+
</head>
67+
<body>
68+
Hello World!
69+
</body>
70+
</html>
71+
72+
### Including LESS-based themes to your project
73+
To load a LESS-based theme to a project at least two CSS files should be referenced in it.
74+
* kendo.common.css — This is a common (base) stylesheet. It applies styles related to element positioning and widget dimensions. It is a must for the widgets to look and function properly.
75+
76+
> Some LESS themes require the loading of different "kendo.common.css" file. More details about these themes can be found [here](https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-files).
77+
78+
* kendo.[theme name].css — This stylesheet applies theme-specific styles such as color palette, background gradients, and patterns, etc.
79+
80+
More about the different LESS themes can be read [here](https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling).
3081

31-
1. Extract the `/js` and `/styles` directories from the bundle archive and copy them to your web application root directory.
32-
1. Include the Kendo UI JavaScript and CSS files in the `head` tag of your HTML document. Verify that the common CSS file is registered before the theme CSS file.
82+
Here is how we can define a Kendo UI project that uses the Kendo UI Default(LESS) theme:
3383

34-
<!DOCTYPE html>
35-
<html>
36-
<head>
37-
<title>Welcome to Kendo UI!</title>
38-
<!-- Common Kendo UI CSS for web widgets and widgets for data visualization. -->
39-
<link href="styles/kendo.common.min.css" rel="stylesheet" />
84+
<!DOCTYPE html>
85+
<html>
86+
<head>
87+
<title>Welcome to Kendo UI!</title>
88+
<!-- Reference to the file that is common for all Kendo UI LESS themes. This file should be referenced before the selected LESS theme.-->
89+
<link href="styles/kendo.common.min.css" rel="stylesheet" />
4090

41-
<!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. -->
42-
<link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
91+
<!-- Reference to the selected LESS-based theme -->
92+
<link href="styles/kendo.default.min.css" rel="stylesheet" />
4393

44-
<!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. -->
45-
<link href="styles/kendo.default.min.css" rel="stylesheet" />
94+
<!-- (Optional) Reference to the RTL(Right-To-Left) CSS file that changes the direction of all Kendo UI widgets. Include this file only if your project will be with Right-To-Left webpage direction. -->
95+
<link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
4696

47-
<!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. -->
48-
<link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />
97+
<!-- (Optional) Reference to the Kendo UI Hybrid CSS file. Include only if you will use the LESS-based theme on a mobile device. -->
98+
<link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />
4999

50-
<!-- jQuery JavaScript -->
51-
<script src="js/jquery.min.js"></script>
100+
<!-- Reference to the jQuery library. It is important tha the jQuery file is loaded before the JavaScript file of Kendo UI -->
101+
<script src="js/jquery.min.js"></script>
52102

53-
<!-- Kendo UI combined JavaScript -->
54-
<script src="js/kendo.all.min.js"></script>
55-
</head>
56-
<body>
57-
Hello World!
58-
</body>
59-
</html>
103+
<!-- Reference to the Kendo UI JavaScript file -->
104+
<script src="js/kendo.all.min.js"></script>
105+
</head>
106+
<body>
107+
Hello World!
108+
</body>
109+
</html>
60110

61111

62-
1. Initialize a widget. Note that the examples in this step assume that the Kendo UI scripts and stylesheets are now added to the document.
112+
## Step 3: Initializing a widget.
113+
> The examples in this step assume that all the Kendo UI scripts and stylesheets are correctly referenced.
63114
64-
The following example demonstrates how to initialize the [DatePicker](https://demos.telerik.com/kendo-ui/datepicker/index).
115+
The following example demonstrates how to initialize the [DatePicker](https://demos.telerik.com/kendo-ui/datepicker/index) component.
65116

66117
<!-- HTML element from which the DatePicker would be initialized -->
67118
<input id="datepicker" />
@@ -78,8 +129,7 @@ To include the required CSS and JavaScript files:
78129
<html>
79130
<head>
80131
<title>Welcome to Kendo UI!</title>
81-
<link href="styles/kendo.common.min.css" rel="stylesheet" />
82-
<link href="styles/kendo.default.min.css" rel="stylesheet" />
132+
<link href="styles/kendo.default-v2.min.css" rel="stylesheet" />
83133
<script src="js/jquery.min.js"></script>
84134
<script src="js/kendo.all.min.js"></script>
85135
</head>
@@ -108,7 +158,6 @@ To include the required CSS and JavaScript files:
108158

109159
## See Also
110160

111-
* [Installing Kendo UI with Bower]({% slug kendoui_bower_packages_kendoui_installation %})
112161
* [Installing Kendo UI by Using the CDN Services]({% slug kendoui_cdn_services_installation %})
113162
* [Installing Kendo UI with NPM]({% slug kendoui_npm_packages_kendoui_installation %})
114163
* [Installing Kendo UI with NuGet]({% slug kendoui_nuget_packages %})

‎docs/intro/supporting/old-versions-support-policy.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Bug fixes are then implemented in the product by the Development team and later
2727

2828
To get a bug fix, you have to upgrade your project to the same release as the release that contains the fix, or later.
2929

30-
* [Upgrading your Kendo UI for jQuery project (new script or style referral)](https://docs.telerik.com/kendo-ui/intro/supporting/scripts-general)
30+
* [Upgrading your Kendo UI for jQuery project (new script or style referral)]({% slug hosting_kendoui %})
3131
* [Upgrading your Telerik&reg; UI for ASP.NET MVC project](https://docs.telerik.com/aspnet-mvc/introduction#upgrade)
3232
* [Upgrading your Telerik&reg; UI for ASP.NET Core project](https://docs.telerik.com/aspnet-core/introduction#upgrade)
3333

0 commit comments

Comments
 (0)