Skip to content

Commit 1f9e929

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 3f31b59 commit 1f9e929

14 files changed

+305
-111
lines changed

‎docs/intro/installation/npm.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ As of the 2022.3.1109 version, the `package.json` file comes with three [fields
6969

7070
To bundle the Kendo UI scripts by using one of the [module systems](#3-choose-a-module-system-to-use), you can use a plugin such as [rollup](https://rollupjs.org/guide/en/).
7171

72+
> Starting from version 2023.3.718, the `kendo` instance is exported as a default export for the CommonJS and ECMAScript modules. This allows you to:
73+
> * Use the `import kendo from '@progress/kendo-ui'` syntax to import the Kendo UI scripts in your application.
74+
> * Use the `kendo` instance to get the jQuery in which the Kendo UI widgets are defined. For example, `const $ = kendo.jQuery; $("#grid").kendoGrid({...});`.
75+
7276
### ECMAScript
7377

7478
To bundle the ECMAScript files:
@@ -237,4 +241,5 @@ To bundle the UMD files:
237241
* [Installing Kendo UI for jQuery by Using the CDN Services]({% slug kendoui_cdn_services_installation %})
238242
* [Installing Kendo UI for jQuery with NuGet]({% slug kendoui_nuget_packages %})
239243
* [Getting Up and Running with Your Kendo UI for jQuery Project (Guide)]({% slug getting_started_installation_kendoui %})
244+
* [Module Bundlers]({% slug modulke_bundlers_integration_kendoui %})
240245
* [Using Script License Code]({% slug using-license-code %})

‎docs/third-party/angular2.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,5 @@ For the sake of distinction, Kendo UI Professional (subject of this documentatio
2929
* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %})
3030
* [SystemJS Support]({% slug systemjs_integration_kendoui %})
3131
* [Webpack Support]({% slug webpacksupport_integration_kendoui %})
32+
* [Module Bundlers]({% slug module_bundlers_integration_kendoui %})
3233
* [Aurelia]({% slug aurelia_integration_kendoui %})

‎docs/third-party/aurelia.md‎

Lines changed: 104 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,104 @@
1-
---
2-
title: Aurelia
3-
page_title: Aurelia - Kendo UI Third-Party Tools
4-
description: "Create Aurelia applications by using Kendo UI controls through applying the Aurelia-KendoUI Bridge."
5-
slug: aurelia_integration_kendoui
6-
---
7-
8-
# Aurelia
9-
10-
[Aurelia](http://aurelia.io/) is an open-source, vanilla-JavaScript client framework for mobile, desktop, and web. It is written in ECMAScript 2016 and helps you create a maintainable, testable, and extensible UI.
11-
12-
## Aurelia-KendoUI Bridge
13-
14-
The [Aurelia-KendoUI Bridge](http://aurelia-ui-toolkits.github.io/demo-kendo/#/about/about) creates native Aurelia components for the Kendo UI suite, so that developers are able to build Aurelia applications by using the Kendo UI toolkit. This interface is a structured and configurable collection of JavaScript classes. It wraps native Kendo UI controls and presents them as Aurelia components.
15-
16-
The skeleton of the Bridge is the standard Aurelia plugin setup and the [KendoUI Components Catalog index](http://aurelia-ui-toolkits.github.io/demo-kendo/#/catalog-index) is the resulting output of its implementation and development.
17-
18-
This Catalogue is an Aurelia application that serves two main purposes:
19-
20-
* Allows developers to verify the correct function of the wrapper code, which presents the Kendo UI native control as an Aurelia component.
21-
* Continuously shares the status of the project by demonstrating different ways of using each component to render Kendo UI controls.
22-
23-
For more information on the Aurelia-KendoUI Bridge functionalities, refer to [this blog post by Aurelia's founder, Rob Eisenberg](http://blog.durandal.io/2016/01/28/aurelia-and-kendo-ui/).
24-
25-
## Prerequisites and Installation
26-
27-
To get your project up and running, refer to the page on [installing the Aurelia-KendoUI Bridge](http://aurelia-ui-toolkits.github.io/demo-kendo/#/installation).
28-
29-
## Basic Usage
30-
31-
The following example demonstrates code snippets for Grid components. For more runnable examples on all Aurelia-KendoUI controls the Bridge supports, refer to the [page of the Aurelia-KendoUI components catalog](http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid/basic-use).
32-
33-
```tab-View
34-
<template>
35-
<require from="./basic-use.css"></require>
36-
37-
<ak-grid k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true">
38-
<ak-col k-title="Contact Name" k-field="ContactName">
39-
<ak-template>
40-
<div class='customer-photo' style="background-image: url(https://demos.telerik.com/kendo-ui/content/web/Customers/${CustomerID}.jpg);"></div>
41-
<div class='customer-name'>${ContactName}</div>
42-
</ak-template>
43-
</ak-col>
44-
<ak-col k-title="Contact Name" k-field="ContactName"></ak-col>
45-
<ak-col k-title="Contact Title" k-field="ContactTitle"></ak-col>
46-
<ak-col k-title="Company Name" k-field="CompanyName"></ak-col>
47-
<ak-col k-field="Country"></ak-col>
48-
</ak-grid>
49-
</template>
50-
```
51-
```tab-ViewModel
52-
export class BasicUse {
53-
54-
pageable = {
55-
refresh: true,
56-
pageSizes: true,
57-
buttonCount: 10
58-
};
59-
60-
constructor() {
61-
this.datasource = {
62-
type: 'odata',
63-
transport: {
64-
read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
65-
},
66-
pageSize: 5
67-
};
68-
}
69-
}
70-
```
71-
```tab-CSS
72-
#grid-basic-use .customer-photo {
73-
display: inline-block;
74-
width: 32px;
75-
height: 32px;
76-
border-radius: 50%;
77-
background-size: 32px 35px;
78-
background-position: center center;
79-
vertical-align: middle;
80-
line-height: 32px;
81-
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
82-
margin-left: 5px;
83-
}
84-
85-
#grid-basic-use .customer-name {
86-
display: inline-block;
87-
vertical-align: middle;
88-
line-height: 32px;
89-
padding-left: 3px;
90-
}
91-
```
92-
93-
## See Also
94-
95-
* [SharePoint Add-Ins]({% slug sharepoint_tutorials %})
96-
* [Twitter Bootstrap]({% slug twitterbootstrapintegration_integration_kendoui %})
97-
* [Angular 2.0]({% slug angular2support_integration_kendoui %})
98-
* [RequireJS]({% slug requirejs_integration_kendoui %})
99-
* [TypeScript]({% slug typescript_integration_kendoui %})
100-
* [Visual Studio IntelliSense]({% slug visualstudiointellisense_integration_kendoui %})
101-
* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %})
102-
* [SystemJS Support]({% slug systemjs_integration_kendoui %})
103-
* [Webpack Support]({% slug webpacksupport_integration_kendoui %})
1+
---
2+
title: Aurelia
3+
page_title: Aurelia - Kendo UI Third-Party Tools
4+
description: "Create Aurelia applications by using Kendo UI controls and applying the Aurelia-KendoUI Bridge."
5+
slug: aurelia_integration_kendoui
6+
---
7+
8+
# Aurelia
9+
10+
[Aurelia](http://aurelia.io/) is an open-source, vanilla-JavaScript client framework for mobile, desktop, and web. It is written in ECMAScript 2016 and helps you create a maintainable, testable, and extensible UI.
11+
12+
## Aurelia-Kendo UI Bridge
13+
14+
The [Aurelia-Kendo UI Bridge](http://aurelia-ui-toolkits.github.io/demo-kendo/#/about/about) creates native Aurelia components for the Kendo UI suite so that developers can build Aurelia applications by using the Kendo UI toolkit. This interface is a structured and configurable collection of JavaScript classes. It wraps native Kendo UI controls and presents them as Aurelia components.
15+
16+
The skeleton of the Bridge is the standard Aurelia plugin setup and the [Kendo UI Components Catalog index](http://aurelia-ui-toolkits.github.io/demo-kendo/#/catalog-index) is the resulting output of its implementation and development.
17+
18+
This Catalog is an Aurelia application that serves two main purposes:
19+
20+
* Allows developers to verify the correct function of the wrapper code, which presents the Kendo UI native control as an Aurelia component.
21+
* Continuously shares the status of the project by demonstrating different ways of using each component to render Kendo UI controls.
22+
23+
For more information on the Aurelia-Kendo UI Bridge functionalities, refer to [this blog post by Aurelia's founder, Rob Eisenberg](http://blog.durandal.io/2016/01/28/aurelia-and-kendo-ui/).
24+
25+
## Prerequisites and Installation
26+
27+
To get your project up and running, refer to the page on [installing the Aurelia-Kendo UI Bridge](http://aurelia-ui-toolkits.github.io/demo-kendo/#/installation).
28+
29+
## Basic Usage
30+
31+
The following example demonstrates code snippets for Grid components. For more runnable examples of all Aurelia-Kendo UI controls that the Bridge supports, refer to the [Aurelia-Kendo UI components catalog](http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid/basic-use).
32+
33+
```tab-View
34+
<template>
35+
<require from="./basic-use.css"></require>
36+
37+
<ak-grid k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true">
38+
<ak-col k-title="Contact Name" k-field="ContactName">
39+
<ak-template>
40+
<div class='customer-photo' style="background-image: url(https://demos.telerik.com/kendo-ui/content/web/Customers/${CustomerID}.jpg);"></div>
41+
<div class='customer-name'>${ContactName}</div>
42+
</ak-template>
43+
</ak-col>
44+
<ak-col k-title="Contact Name" k-field="ContactName"></ak-col>
45+
<ak-col k-title="Contact Title" k-field="ContactTitle"></ak-col>
46+
<ak-col k-title="Company Name" k-field="CompanyName"></ak-col>
47+
<ak-col k-field="Country"></ak-col>
48+
</ak-grid>
49+
</template>
50+
```
51+
```tab-ViewModel
52+
export class BasicUse {
53+
54+
pageable = {
55+
refresh: true,
56+
pageSizes: true,
57+
buttonCount: 10
58+
};
59+
60+
constructor() {
61+
this.datasource = {
62+
type: 'odata',
63+
transport: {
64+
read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
65+
},
66+
pageSize: 5
67+
};
68+
}
69+
}
70+
```
71+
```tab-CSS
72+
#grid-basic-use .customer-photo {
73+
display: inline-block;
74+
width: 32px;
75+
height: 32px;
76+
border-radius: 50%;
77+
background-size: 32px 35px;
78+
background-position: center center;
79+
vertical-align: middle;
80+
line-height: 32px;
81+
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
82+
margin-left: 5px;
83+
}
84+
85+
#grid-basic-use .customer-name {
86+
display: inline-block;
87+
vertical-align: middle;
88+
line-height: 32px;
89+
padding-left: 3px;
90+
}
91+
```
92+
93+
## See Also
94+
95+
* [SharePoint Add-Ins]({% slug sharepoint_tutorials %})
96+
* [Twitter Bootstrap]({% slug twitterbootstrapintegration_integration_kendoui %})
97+
* [Angular 2.0]({% slug angular2support_integration_kendoui %})
98+
* [RequireJS]({% slug requirejs_integration_kendoui %})
99+
* [TypeScript]({% slug typescript_integration_kendoui %})
100+
* [Visual Studio IntelliSense]({% slug visualstudiointellisense_integration_kendoui %})
101+
* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %})
102+
* [SystemJS Support]({% slug systemjs_integration_kendoui %})
103+
* [Webpack Support]({% slug webpacksupport_integration_kendoui %})
104+
* [Module Bundlers]({% slug module_bundlers_integration_kendoui %})

‎docs/third-party/kinvey.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,4 +123,5 @@ The following example demonstrates how to configure the `destroy` transport oper
123123
* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %})
124124
* [SystemJS Support]({% slug systemjs_integration_kendoui %})
125125
* [Webpack Support]({% slug webpacksupport_integration_kendoui %})
126+
* [Module Bundlers]({% slug module_bundlers_integration_kendoui %})
126127
* [Aurelia]({% slug aurelia_integration_kendoui %})

0 commit comments

Comments
 (0)