You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/intro/installation/cdn-service.md
+4-8Lines changed: 4 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ position: 4
11
11
12
12
The Kendo UI CDN is hosted on the [Amazon CloudFront](https://aws.amazon.com/cloudfront/).
13
13
14
-
Only the official Kendo UI releases and serviced packs are uploaded to the CDN. Internal builds are not available on CDN. To access the Kendo UI CDN services, you can use either the [HTTP](#using-the-http-protocol) or the [HTTPS](#using-the-https-protocol) protocol.
14
+
Only the official Kendo UI releases and service packs are uploaded to the CDN. Internal builds are not available on CDN. To access the Kendo UI CDN services, you can use either the [HTTP](#using-the-http-protocol) or the [HTTPS](#using-the-https-protocol) protocol.
15
15
16
16
## Using the HTTP Protocol
17
17
@@ -25,18 +25,14 @@ For example, the `{{ site.cdnVersion }}` version can be loaded from the followin
The minified Kendo UI scripts are available as of the Kendo UI Q1 2014 SP1 release.
29
-
30
-
To load the scripts, use the `http://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/kendo.ui.core.min.js` URL.
28
+
The minified Kendo UI scripts are available as of the Kendo UI Q1 2014 SP1 release. To load them, use the `http://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/kendo.ui.core.min.js` URL.
31
29
32
30
## Using the HTTPS Protocol
33
31
34
-
To access the Kendo UI CDN service through the HTTPS protocol, use the same host name `kendo.cdn.telerik.com` and replace the scheme (protocol) with `https`. For example:
> The https://da7xgjtj801h2.cloudfront.net/ URL remains active but is no longer recommended for new projects.
39
33
34
+
To access the Kendo UI CDN service through the HTTPS protocol, use the same `kendo.cdn.telerik.com` host name and replace the scheme (protocol) with `https`. For example, `https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/kendo.all.min.js`.
35
+
40
36
## Troubleshooting
41
37
42
38
This section provides solutions for common issues you might encounter while using the Kendo UI CDN services.
Copy file name to clipboardExpand all lines: docs/intro/installation/hosting-kendoui.md
+76-59Lines changed: 76 additions & 59 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,45 +8,59 @@ position: 2
8
8
9
9
# Adding Kendo UI in Your Project
10
10
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).
11
+
To start using the Kendo UI for jQuery and host the library into your project, you need to:
12
12
13
-
## Step 1: Downloading the Bundles
13
+
1.[Download the bundles](#downloading-the-bundles)
14
+
1.[Add the CSS and JavaScript references](#referencing-the-needed-css-and-javascript-files)
15
+
1.[Initialize a widget](#initializing-a-widget)
14
16
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:
17
+
## Downloading the Bundles
18
+
19
+
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 contains:
16
20
17
21
|Folders |Contents |
18
22
|:--- |:--- |
19
-
|`/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.|
23
+
|`/apptemplates`|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.|
20
24
|`/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
25
|`/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.|
23
-
|`/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.|
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 |
26
+
|`/license-agreements`|Contains the End User License Agreement that has to be read before installing Kendo UI.|
27
+
|`/src`|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.|
28
+
|`/styles`|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. |
29
+
|`/typescript`|Includes the Kendo UI [TypeScript definitions](https://docs.telerik.com/kendo-ui/third-party/typescript).|
30
+
|`/vsdoc`|Includes the files that provide the intellisense.|
27
31
|`changelog.html`|Provides the Kendo UI release notes.|
28
32
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.
33
+
To download the commercial version of Kendo UI:
34
+
35
+
1. Go to www.telerik.com and log in with your credentials.
36
+
1. Navigate to the [**Downloads** section](https://www.telerik.com/account/my-downloads) of your account.
37
+
1. Search for Progress® Kendo UI® for jQuery and download the package.
38
+
39
+
Based on the preferred technologies, you can also use other approaches to add Kendo UI to a project. For more details, refer to the following articles:
30
40
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
41
*[Installing Kendo UI by Using the CDN Services]({% slug kendoui_cdn_services_installation %})
33
42
*[Installing Kendo UI with NPM]({% slug kendoui_npm_packages_kendoui_installation %})
34
-
*[Installing Kendo UI with NuGet]({% slug kendoui_nuget_packages %})
43
+
*[Installing Kendo UI with NuGet]({% slug kendoui_nuget_packages %})
44
+
45
+
## Referencing the Needed CSS and JavaScript Files
35
46
36
-
## Step 2: Referencing the needed CSS and JavaScript files to your project
47
+
To include the required by Kendo UI CSS and JavaScript files:
37
48
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.
49
+
1. Extract the `/js` and `/styles` directories from the downloaded bundle archive.
50
+
1. Copy the extracted folders in the root folder of your project.
51
+
1. 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 will find the respective sections which discuss the loading of each theme type.
39
52
40
-
### Including SASS-based themes to your project
53
+
### Including SASS-Based Themes
41
54
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.
55
+
Each SASS-based theme is represented by a single CSS file that combines the layout and the styling of the different components. In this way, only one CSS file needs to be referenced in your project.
43
56
44
57
The CSS files defining the different Kendo UI SASS themes are as follows:
The following example shows how to define a Kendo UI project that uses the Kendo UI Default v.2 theme.
50
64
51
65
<!DOCTYPE html>
52
66
<html>
@@ -67,19 +81,21 @@ Here is how we can define a Kendo UI project that uses the Kendo UI Default v.2
67
81
<body>
68
82
Hello World!
69
83
</body>
70
-
</html>
84
+
</html>
85
+
86
+
### Including LESS-Based Themes
71
87
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.
88
+
To load a LESS-based theme to a project, at least two CSS files need to be referenced in it:
75
89
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).
90
+
*`kendo.common.css`—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.
77
91
78
-
* kendo.[theme name].css — This stylesheet applies theme-specific styles such as color palette, background gradients, and patterns, etc.
92
+
> Some LESS themes require the loading of a different `kendo.common.css` file. For more details, refer to https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-files.
79
93
80
-
More about the different LESS themes can be read [here](https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling).
94
+
*`kendo.[theme name].css`—Applies theme-specific styles such as color palette, background gradients, and patterns, and so on.
81
95
82
-
Here is how we can define a Kendo UI project that uses the Kendo UI Default(LESS) theme:
96
+
For more information on the different LESS themes, refer to the article on [styling the appearance of widgets]({% slug themesandappearnce_kendoui_desktopwidgets %}).
97
+
98
+
The following example shows how to define a Kendo UI project that uses the Kendo UI Default (LESS) theme.
83
99
84
100
<!DOCTYPE html>
85
101
<html>
@@ -109,39 +125,40 @@ Here is how we can define a Kendo UI project that uses the Kendo UI Default(LESS
109
125
</html>
110
126
111
127
112
-
## Step 3: Initializing a widget.
128
+
## Initializing a Widget
129
+
113
130
> The examples in this step assume that all the Kendo UI scripts and stylesheets are correctly referenced.
114
131
115
-
The following example demonstrates how to initialize the [DatePicker](https://demos.telerik.com/kendo-ui/datepicker/index) component.
116
-
117
-
<!-- HTML element from which the DatePicker would be initialized -->
118
-
<input id="datepicker" />
119
-
<script>
120
-
$(function() {
121
-
// Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin
122
-
$("#datepicker").kendoDatePicker();
123
-
});
124
-
</script>
125
-
126
-
The following example demonstrates the full initialization of the [DatePicker](https://demos.telerik.com/kendo-ui/datepicker/index).
Copy file name to clipboardExpand all lines: docs/intro/installation/npm.md
+10-4Lines changed: 10 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,13 +28,19 @@ The Kendo UI NPM package is available as [`@progress/kendo-ui`](https://www.npmj
28
28
> * The scripts in the NPM package are not usable in the browser. To work around this issue, use a bundler such as [WebPack]({% slug webpacksupport_integration_kendoui %}).
29
29
> * After May 2017, the `kendo` legacy package that is available as a GitHub repository and is accessible through `git+https://bower.telerik.com/npm-kendo-ui/npm-kendo.git` will no longer be updated but will remain active.
30
30
31
-
## NPM Channels for Kendo UI packages
31
+
## NPM Channels for Kendo UI Packages
32
32
33
-
As of November 2019, there are two separate channels for the Internal and Official NPM packages. The official releases and Service Packs for Kendo UI and Kendo UI Core are distributed in the "latest" channel. The internal builds are released in the "dev" channel.
33
+
As of November 2019, Kendo UI supports two separate channels for its official and internal NPM packages.
34
34
35
-
To install the latest internal build, run `npm install --save @progress/kendo-ui@dev`. If you wish to install an older version, run `npm install --save @progress/[email protected]`.
35
+
* The official releases and service packs for Kendo UI and Kendo UI Core are distributed in the **latest** channel.
36
36
37
-
To install the latest official build, run `npm install --save @progress/kendo-ui@latest`.
37
+
To install the latest official build, run `npm install --save @progress/kendo-ui@latest`.
38
+
39
+
* The internal builds are released in the **dev** channel.
40
+
41
+
* To install the latest internal build, run `npm install --save @progress/kendo-ui@dev`.
42
+
43
+
* To install an earlier version, run `npm install --save @progress/[email protected]`.
0 commit comments