diff --git a/sample/src/help/docs/about-materialize/integrated-with-aurelia.md b/sample/src/help/docs/about-materialize/integrated-with-aurelia.md
index 4d28dc1d..958a32e2 100644
--- a/sample/src/help/docs/about-materialize/integrated-with-aurelia.md
+++ b/sample/src/help/docs/about-materialize/integrated-with-aurelia.md
@@ -1,10 +1,3 @@
### 1. Integrated with Aurelia
-
-
-
-The Kendo UI framework is seamlessly integrated with Aurelia. From Grid to Scheduler to Chart, the tight Aurelia integration in Kendo UI tools enables you to drop a few script and style files into your page and get instant—and complete—Kendo UI access via directives. Learn more about the Aurelia integration in Kendo UI.
-
-* * *
-***Note: all pages from the Intro to KendoUI help section will be augmented***
\ No newline at end of file
diff --git a/sample/src/help/docs/about-materialize/why-choose-materialize.md b/sample/src/help/docs/about-materialize/why-choose-materialize.md
index 6e875ace..bdd0f38d 100644
--- a/sample/src/help/docs/about-materialize/why-choose-materialize.md
+++ b/sample/src/help/docs/about-materialize/why-choose-materialize.md
@@ -1,25 +1,3 @@
-### 2. Why Choose KendoUI
-
-
-***Note: each of the enumerated advantages below have to be augmented by a lot of Aurelia specific added advantages***
-* * *
-
-
-#### Ultimate Performance with Minimum Resources
-
-Fast and light. Every Kendo UI widget is rendered with the fastest possible mark-up to deliver ultimate JavaScript performance.
-
-#### Mobile-Friendly and Responsive
-
-Touch support, easy mobile rendering, responsive capabilities and integration with Bootstrap. **[Learn more](http://www.telerik.com/kendo-ui/responsive-features)** about the rich Kendo UI responsive features.
-
-
-
-#### Built-In, Customizable Themes
-
-Apply one of the 16 built-in themes, such as High Contrast, SAP Fiori theme or Material Design theme:
-
-
-
\ No newline at end of file
+### 2. Why Choose Materialize
diff --git a/sample/src/help/docs/about-this-application/components-catalog.md b/sample/src/help/docs/about-this-application/components-catalog.md
index f6c471da..5032f112 100644
--- a/sample/src/help/docs/about-this-application/components-catalog.md
+++ b/sample/src/help/docs/about-this-application/components-catalog.md
@@ -1,79 +1,2 @@
-### 3. Catalog of KendoUI controls as Aurelia components.
-
-This is the most likely fashion this application is being used. Invoked via URL: **http://aurelia-ui-toolkits.github.io/demo-kendo** the application renders the view shown below, which shows the likely most interesting control **grid** by default.
-
-
-
-
-
- Image 1
-
-
-#### 2.1 Browsing the catalog
-
-The click on **Samples** menu item (as shown on Image 1 above) results with the Aurelia KendoUI Controls Catalog "landing" (default) page which depicts the KendoUI basic grid sample (again as shown on Image 1 above). In addition to rendering the grid, the Aurelia KendoUI Controls Catalog also shows the **Samples Toolbar**, which shows all categories of controls, with the **MOST POPULAR** category being select as default. At the moment, this category has only grid control selected as its own default - which explains why is the click on that category results with the same view as it is rendered initially
-
-
-
-
-
-
- Image 2
-
-
-
-
-Selecting other items from the Samples Toolbar will result with the appearance of the second instance of the Samples Toolbar, right beneath the first one. Here is the the screenshot of the application state if the **MOST POPULAR** toolbar item is selected:
-
-
-
-
-
-
-Image 3
-
-
-
-
-Finally, selecting the **STOCK CHARTS** toolbar item, results with the the view of the stock charts page of this catalog:
-
-
-
-
-
-
-Image 4
-
-
-* * *
-#### 2.2 Browsing the catalog's code sections
-
-Each of the page showing a KendoUI control converted to an Aurelia component, has the section that shows the component's **view** and **view model**. Here are three consecutive screen-shots showing that information for the Sample grid control on **Image 1** above.
-
-
-**Grid view**
-
-
-
-
-Image 5
-
-
-
-**Grid view model**
-
-
-
-
-Image 6
-
-
-
-**Private CSS file**
-
-
-
-
-Image 6
-
+### 3. Catalog of Materialize controls as Aurelia components.
diff --git a/sample/src/help/docs/about-this-application/installation.md b/sample/src/help/docs/about-this-application/installation.md
index 0322cd11..bc1bce7d 100644
--- a/sample/src/help/docs/about-this-application/installation.md
+++ b/sample/src/help/docs/about-this-application/installation.md
@@ -1,21 +1,3 @@
### 5. Installation
-
-The **[Installation page](#/installation)** contains very detailed description of all three installation variants which depend on how do you plan to get **[KendoUI product](http://www.telerik.com/kendo-ui)** from Telerik.
-
-
-You could already have the KendoUI PRO license, or you plan to download the KendoUI PRO evaluation copy - in both such cases you should select the HAVING KENDOUI ALREADY: VENDORS tab which provides all details of the approach where KendoUI is kept in the `vendors` folder in you project.
-
-The other two alternatives are variants of the same idea - grab the free copy of a free subset of KendoUI controls set, often referred to as Kendo core. If you want to take the **[Github route](https://github.com/telerik/kendo-ui-core)**, select the NEW FROM GITHUB: KENDO CORE tab. The last alternative described in NEW FROM GITHUB: JSPM-GIT tab handles the case where you want to fetch KendoUI core from **[Telerik's website using bower](http://docs.telerik.com/kendo-ui/intro/installation/bower-install#install-bower-packages)**
-
-The screen shot below depicts the Aurelia-KendoUI bridge **[Installation page](#/installation)**
-
-
-
-
-
-
-
-Image 1
-
diff --git a/sample/src/help/docs/about-this-application/internal-structure.md b/sample/src/help/docs/about-this-application/internal-structure.md
index 63cc1874..34e10f57 100644
--- a/sample/src/help/docs/about-this-application/internal-structure.md
+++ b/sample/src/help/docs/about-this-application/internal-structure.md
@@ -1,397 +1,3 @@
### 4. Application's internal structure
-
-This article presents the overview of the internal organization of the **[Aurelia-KendoUI-Bridge](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin)** project developed by the team of Aurelia UI Toolkits organization, dedicated to help Aurelia's wide spread adoption .
-
-The internal organization of this plugin is slightly different (we believe that it is more convenient) than Aurelia's **[standard plugin](https://github.com/aurelia/skeleton-plugin)**. Image 1 below, shows the overall structure.
-
-
-
-
-
- Image 1
-
-
-The following three sections describe the details of the plugin structure and building process
-
-
-* * *
-
-#### 3.1 Plugin code
-
-
-
-
-Image 2
-
-
-
-The plugin's **`src`** folder contains the **`common`** subfolder with utilities used by more than one KendoUI controls "wrapped" by this plugin. In addition to the just described utility of the **`common`** folder, the **`src`** folder contains a subfolder for each of the KendoUI control that is wrapped (componentized) by this plugin. The above screenshot indicates that the version of the plugin shown on the Image 2 wraps KendoUI **autocomplete**, **button**, **chart**, **colorpicker**, **combobox**, **dropdownlist**, **grid**, **menu**, **progressbar**, **scheduler**, **slider**, **tabstrip** and **toolbar** controls.
-
-
-**Note:** The existence of the **scheduler** folder in the plugin's **src** folder on Image 2 does not imply that the **[KendoUI scheduler controler](http://demos.telerik.com/kendo-ui/scheduler/index)** is already implemented (in this specific case it indicates that the skeleton sets of files is created in anticipation of the implementation start date).
-
-
-The code in the plugin (which is the JavaScript equivalent of the more general concept of **[dynamic linker](https://en.wikipedia.org/wiki/Dynamic_linker))** defines its content via the `index.js` file
-
-
-##### File `index.js`
-
-```javascript
-import {Aurelia} from 'aurelia-framework';
-import * as LogManager from 'aurelia-logging';
-let logger = LogManager.getLogger('aurelia-kendoui-plugin');
-import {KendoConfigBuilder} from './config-builder';
-import 'jquery';
-
-export function configure(aurelia: Aurelia, configCallback?: (builder: KendoConfigBuilder) => void) {
- let builder = new KendoConfigBuilder();
-
- if (configCallback !== undefined && typeof(configCallback) === 'function') {
- configCallback(builder);
- }
-
- // Provide core if nothing was specified
- if (builder.resources.length === 0) {
- logger.warn('Nothing specified for kendo configuration - using defaults for Kendo Core');
- builder.core();
- }
-
- // Pull the data off the builder
- let resources = builder.resources;
-
- if (builder.useGlobalResources) {
- aurelia.globalResources(resources);
- }
-}
-
-/**
-* Configure the Aurelia-KendoUI-plugin
-*/
-export class KendoConfigBuilder {
-
- resources: string[] = [];
- useGlobalResources: boolean = true;
-
- /**
- * Globally register all Kendo Core wrappers
- */
- core(): KendoConfigBuilder {
- this.kendoButton()
- .kendoTabStrip()
- .kendoProgressBar()
- .kendoSlider()
- .kendoColorPicker()
- .kendoDropDownList();
- return this;
- }
-
- /**
- * Globally register all Kendo Core and Kendo Pro wrappers
- */
- pro(): KendoConfigBuilder {
- this.core()
- .kendoGrid()
- .kendoAutoComplete()
- .kendoChart();
- return this;
- }
-
- /**
- * Don't globalize any resources
- * Allows you to import wrappers yourself via
- */
- withoutGlobalResources(): KendoConfigBuilder {
- this.useGlobalResources = false;
- return this;
- }
-
- kendoAutoComplete(): KendoConfigBuilder {
- this.resources.push('autocomplete/autocomplete');
- return this;
- }
-
- kendoButton(): KendoConfigBuilder {
- this.resources.push('button/button');
- return this;
- }
-
- kendoMenu(): KendoConfigBuilder {
- this.resources.push('menu/menu');
- return this;
- }
-
- kendoCombobox(): KendoConfigBuilder {
- this.resources.push('combobox/combobox');
- return this;
- }
-
- kendoDropDownList(): KendoConfigBuilder {
- this.resources.push('dropdownlist/dropdownlist');
- return this;
- }
-
- kendoGrid(): KendoConfigBuilder {
- this.resources.push('grid/grid');
- this.resources.push('grid/au-col');
- return this;
- }
-
- kendoScheduler(): KendoConfigBuilder {
- this.resources.push('scheduler/scheduler');
- return this;
- }
-
- kendoTabStrip(): KendoConfigBuilder {
- this.resources.push('tabstrip/tabstrip');
- return this;
- }
-
- kendoToolbar(): KendoConfigBuilder {
- this.resources.push('toolbar/toolbar');
- return this;
- }
-
- kendoChart(): KendoConfigBuilder {
- this.resources.push('chart/chart');
- this.resources.push('chart/sparkline');
- this.resources.push('chart/stock');
- this.resources.push('chart/treemap');
- return this;
- }
-
- kendoProgressBar(): KendoConfigBuilder {
- this.resources.push('progressbar/progressbar');
- return this;
- }
-
- kendoSlider(): KendoConfigBuilder {
- this.resources.push('slider/slider');
- return this;
- }
-
- kendoColorPicker(): KendoConfigBuilder {
- this.resources.push('colorpicker/colorpicker');
- return this;
- }
-}
-```
-
-
-**Note** that this file defines the controls that are really available to Aurelia developers.
-
-
-
-Let's also show the actual Aurelia plugin implementation of one of the simplest KendoUI controls - `autocomplete`
-
-##### File `autocomplete.js`
-
-```javascript
-import {customAttribute, bindable, inject} from 'aurelia-framework';
-import {WidgetBase} from '../common/widget-base';
-import {generateBindables} from '../common/decorators';
-import {fireEvent} from '../common/events';
-import 'kendo-ui/js/kendo.autocomplete.min';
-import 'kendo-ui/js/kendo.virtuallist.min';
-
-@customAttribute('k-autocomplete')
-@inject(Element)
-@generateBindables('kendoAutoComplete')
-export class AutoComplete extends WidgetBase {
-
- @bindable kDataSource;
- @bindable options = {};
-
- constructor(element) {
- super('kendoAutoComplete', element);
- }
-
- bind(ctx) {
- super.bind(ctx);
-
- this._initialize();
- }
-
- _initialize() {
- super._initialize();
-
- // without these change and select handlers, when you select an options
- // the value binding is not updated
- this.widget.bind('change', (event) => {
- this.kValue = event.sender.value();
-
- // Update the kendo binding
- fireEvent(this.element, 'input');
- });
-
- this.widget.bind('select', (event) => {
- this.kValue = event.sender.value();
-
- // Update the kendo binding
- fireEvent(this.element, 'input');
- });
- }
-
- kEnableChanged() {
- if (this.widget) {
- this.widget.enable(this.kEnable);
- }
- }
-
- enable(newValue) {
- if (this.widget) {
- return this.widget.enable(newValue);
- }
- }
-
- value(newValue) {
- if (this.widget) {
- if (newValue) {
- this.widget.value(newValue);
- this.widget.trigger('change');
- } else {
- return this.widget.value();
- }
- }
- }
-
- search(value) {
- if (this.widget) {
- this.widget.search(value);
- }
- }
-
- close(value) {
- if (this.widget) {
- return this.widget.close(value);
- }
- }
-
- dataItem(value) {
- if (this.widget) {
- return this.widget.dataItem(value);
- }
- }
-
- destroy() {
- if (this.widget) {
- return this.widget.destroy();
- }
- }
-
- focus() {
- if (this.widget) {
- return this.widget.focus();
- }
- }
-
- readonly(value) {
- if (this.widget) {
- return this.widget.readonly(value);
- }
- }
-
- refresh() {
- if (this.widget) {
- return this.widget.refresh();
- }
- }
-
- select(value) {
- if (this.widget) {
- return this.widget.select(value);
- }
- }
-
- setDataSource(value) {
- if (this.widget) {
- return this.widget.setDataSource(value);
- }
- }
-
- suggest(value) {
- if (this.widget) {
- return this.widget.suggest(value);
- }
- }
-}
-
-```
-
-* * *
-
-#### 3.2 Sample Application that acts as the Plugin consumer
-
-
-As [mentioned before](#anch1) Aurelia-KendoUI plugin project has a special structure, with the plugin consumer application being a part of the same project (see the content of the blue rectangle on the image 3 below)
-
-
-
-
- Image 3
-
-
-
-#### Color codes:
- - **yellow**: application runtime created by running the **`jspm install`** command in the **`aurelia-kendoui-plugin/sample`** folder
-
- - **orange**: KendoUI controls hosted by this sample app (these controls are the consumers of the Aurelia-KendoUI-plugin)
-
- - **bluish**: Standard Aurelia application files collection
-
- - **olive**: Standard Aurelia application configuration/ css / html / js files
-
-
-
-#### Sample application showing the KendoUI Autocomplete control:
-
-
-**Note**: for better visibility this screenshot is rendered using the Moonlight theme
-
-
-
diff --git a/sample/src/help/docs/about-this-application/introduction.md b/sample/src/help/docs/about-this-application/introduction.md
index c4ebc06f..cda0990a 100644
--- a/sample/src/help/docs/about-this-application/introduction.md
+++ b/sample/src/help/docs/about-this-application/introduction.md
@@ -1,26 +1,3 @@
### 1. Introduction
-
-
-Describing this application in a few words is not a simple task due to its "multiple personalities". It started as an advanced exercise in writing Aurelia Plugin, a basic building block of the whole Aurelia Framework, with the intent to create Aurelia Components from KendoUI controls. This "personality" is encapsulated in **[this Github repository](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin)**
-
-
-In order to accelerate the development of this plugin, we decided to use somewhat unusual architecture, where we embedded the application acting as a consumer of the plugin's service into the plugin project itself. This way, each newly added "wrapper" to **[this folder](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/tree/master/src)** can immediately be tested in this **[embedded application](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/tree/master/sample/src)**.
-
-
-Having this embedded application in place, it became instantly obvious that it would be very useful if it could be also hosted on Github as an independent application, so we could use the references to the sections of the app and the plugin in the context of the application's on-line help documents. As a result we have this "embeded" application **[here](http://aurelia-ui-toolkits.github.io/demo-kendo)**, with the great feature - it automatically reflects the state of the whole project.
-
-
-As we started to improve this application's user interface (by using the KendoUI controls that are already available as Aurelia components), it became apparent that calling this application **Aurelia-KendoUI components catalog** is the best name for the whole project, which can now be seen as the **[Catalog](#/samples)** with the __embedded__ **[plugin](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/tree/master/src)**.
-
-
-The help category named **"About this application"** (the article you are reading now is the first item in that collection) refers to the **[standalone instance](http://aurelia-ui-toolkits.github.io/demo-kendo)** of the **[embedded sample application](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/tree/master/sample)** in the **[Aurelia-KendoUI bridge](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin)** project.
-
-
-
-This explanation will make more sense after checking the information in the category **[Bridge developers tutorials](#/help/docs/bridge_developers_tutorials/1._introduction)**, which explains the overall structure of the Aurelia plugin project which **implements** the KendoUI bridge. Note that we are using the term **bridge** to point out the specific **purpose** of the Aurelia KendoUI plugin project - to implement the Aurelia friendly interface / bridge to KendoUI controls set.
-
-
-
-#### We suggest to read the [Navigation page](#/help/docs/about_this_application/2._navigation_guide) next.
diff --git a/sample/src/help/docs/about-this-application/navigation.md b/sample/src/help/docs/about-this-application/navigation.md
index ce99b19c..2224b045 100644
--- a/sample/src/help/docs/about-this-application/navigation.md
+++ b/sample/src/help/docs/about-this-application/navigation.md
@@ -1,58 +1,3 @@
### 2. Navigation guide
-
-
-The order of Help Documents sections:
-
-
-
-
-
- Image 1
-
-
-is chosen to indicate the order of reading in most situations. This article provides some additional hints about the content of each section and why you might be interested to read it, possibly out of the "natural" sequence defined in Image 1.
-
-
-#### About this application
-
-This section which starts with [introduction](#/help/docs/about_this_application/1._introduction) is the collection of articles explaining the purpose and structure of this **[Aurelia-Kendui Components Catalog application](http://aurelia-ui-toolkits.github.io/demo-kendo/)**. The gist of this collection of articles is:
-
- - If you are a developer looking for a well balanced set of UI components for Aurelia - check the **[catalog of components](http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples)**.
-
- - If you are a developer already knowing about this set of UI components for Aurelia - check **[App developers tutorials](#/help/docs/app_developers_tutorials/1._introduction)**
-
- - If you are a potential contributor to this project, - check **[Bridge developers tutorials](#/help/docs/bridge_developers_tutorials/1._introduction)** as well as **[Bridge developers notes](#/help/docs/bridge_developers_notes/1._introduction)**.
-
-
-#### Navigation guide
-
-This is the section you are reading now - it provides the "global navigation" details that might not be obvious from a sequential reading process.
-
-
-#### About Aurelia
-
-This section is provided as a help to developers that are familiar with **[KendoUI toolkit](http://www.telerik.com/kendo-ui)** and would like to use it with **[Aurelia framework](http://aurelia.io/)**
-
-
-#### About KendoUI
-
-This section is provided as a help to developers that are familiar with **[Aurelia framework](http://aurelia.io/)** and would like find out more about **[KendoUI toolkit](http://www.telerik.com/kendo-ui)** in order to be able to use **[Aurelia KendoUI bridge](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin)** to develop the user interface for their Aurelia applications.
-
-
-#### App developers tutorials
-
-This section starts with the well known **[Aurelia Skeleton Navigation](https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-es2016)** application and the **[Aurelia KendoUI bridge](https://github.com/aurelia-ui-toolkits/skeleton-navigation-kendo)** (creation of which is the subject of the **Bridge developers tutorials**) and teaches you how to add four chosen Aurelia KendoUI **components** (`autocomplete, `button`, `chart` and `grid`).
-
-
-#### Bridge developers tutorials
-
-This section starts with the (practically empty) **[Aurelia Skeleton plugin](https://github.com/aurelia/skeleton-plugin)** and shows how to create the **[Aurelia KendoUI bridge](https://github.com/aurelia-ui-toolkits/skeleton-navigation-kendo)**, which is being used in **App developers tutorials** section.
-
-
-#### Bridge developers notes
-
-Due to relative complexity of some of **[Aurelia KendoUI bridge](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin)** components, this section contains the selected collection of notes that are useful to developers that want to contribute to the future development of **[Aurelia KendoUI bridge](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin)**
-
-
diff --git a/sample/src/help/docs/about-this-application/project-status.md b/sample/src/help/docs/about-this-application/project-status.md
index a367df57..d4ef8a80 100644
--- a/sample/src/help/docs/about-this-application/project-status.md
+++ b/sample/src/help/docs/about-this-application/project-status.md
@@ -1,14 +1,3 @@
### 6. Project status
-
-The **[Project status](#/project-status)** page is a temporary structure designed to provide quick glance into the Aurelia-KendoUI bridge development status, as well as a quick launching point (as each of the control names is a **link** to the related control in the **[components catalog](http://aurelia-ui-toolkits.github.io/demo-kendo/*samples)** - section of this application described **[here](#/help/docs/about_this_application/3._components_catalog)**.
-
-
-
-
-
-
-Image 1
-
-
diff --git a/sample/src/help/docs/about-this-application/themes-selector.md b/sample/src/help/docs/about-this-application/themes-selector.md
index 79bc9f76..f5e10c3a 100644
--- a/sample/src/help/docs/about-this-application/themes-selector.md
+++ b/sample/src/help/docs/about-this-application/themes-selector.md
@@ -1,20 +1,3 @@
### 7. Themes selector
-
-
-Click on the **Theme** menu item results with the invocation of the theme selector pop-up window
-
-
-
-
-
-
-
-
-
-
-
-Selecting any of the 16 supported themes results with the application and all elements of its **[Components catalog](#/help/docs/about_this_application/3._components_catalog)** be rendered using the selected theme.
-
-The above screen shot indicates that the Material theme is the default theme. This can be changed using **[this](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/blob/master/sample/src/settings.js#L2)** line.
\ No newline at end of file
diff --git a/sample/src/help/docs/app-developers-tutorials/autocomplete.md b/sample/src/help/docs/app-developers-tutorials/autocomplete.md
index 45ea2400..f2b01c36 100644
--- a/sample/src/help/docs/app-developers-tutorials/autocomplete.md
+++ b/sample/src/help/docs/app-developers-tutorials/autocomplete.md
@@ -2,85 +2,3 @@
### 3. Autocomplete component
-
-Citation from **[Aurelia Documentation](http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.7/doc/article/creating-components)**
-
-> In Aurelia, user interface components are composed of view and view-model pairs. The view is written with HTML and is rendered into the DOM. The view-model is written with ES 2016 and provides data and behavior to the view. The Templating Engine along with Dependency Injection are responsible for creating these pairs and enforcing a predictable lifecycle for the component. Once instantiated, Aurelia's powerful databinding links the two pieces together allowing changes in your view-model to be reflected in the view and changes in your view to reflected in your view-model. This Separation of Concerns is great for developer/designer collaboration, maintainability, architectural flexibility, and even source control.
-To create a UI component, you need only create two files, one for each of the component parts.
-
-##### View: k-autocomplete.html
-
-
-```html
-
-
-
-
Type a name, available values in the list are: ${ items }
-
-
-```
-
-
-
-where the single statement ``
-
-
-
-is responsible for the instantiation of the autocomplete control (highlighted in the blue rectangle on the Image 1 below):
-
-
-
-
-
-
- Image 1
-
-
-
-
-
-
-**Observe** that the custom atttribute defined on this single statement (`k-datasource`) coupled with the use of Aurelia `.bind` feature maps the value of the `k-datasource` attribute with the array `items` defined in the matching view model (shown below)
-
-
-
-##### View model k-autocomplete.js
-
-```javascript
-export class BasicUse {
- items = [
- 'Charles',
- 'Jedd',
- 'Nikolaj',
- 'Jeroen',
- 'David',
- 'Rob',
- 'Matt',
- 'Patrick',
- 'Jason',
- 'Martin',
- 'Fredrick',
- 'Alex'
- ]
-}
-```
-
-
-
-
-* * *
-
-#### More details: [Components catalog](#/samples/autocomplete)
-#### Next page: [Button component tutorial](#/help/docs/app_developers_tutorials/4._button_component)
-
diff --git a/sample/src/help/docs/app-developers-tutorials/button.md b/sample/src/help/docs/app-developers-tutorials/button.md
index eedacff6..4b2fe6f3 100644
--- a/sample/src/help/docs/app-developers-tutorials/button.md
+++ b/sample/src/help/docs/app-developers-tutorials/button.md
@@ -2,95 +2,3 @@
### 4. Button
-
-##### View: k-button.html
-
-```html
-
-
-
-
-
Basic KendoUI Button API sample
-
- See KendoUI Bridge button folder for more details
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-Just like in the case of the Autocomplete control, the statement
-
-
- ``
-
-
-
-
-results with the instantiation of the button:
-
-
-
-
-
-
- Image 1
-
-
-
-
-**Observe** that the button control, just like the autocomplete control are HTML native elements and that KendoUI Aurelia bridge adds several custom attributes (`k-enable`, `k-icon` that are bound to [KendoUI button](http://docs.telerik.com/kendo-ui/api/javascript/ui/button)) "matching native properties" . Note also the definition of the event triggers that are activating the code in the view model:
-
-
-
-
-##### View model: k-button.js
-
-```javascript
-export class ButtonApi {
- enabled = true;
-
- disable() {
- this.enabled = false;
- }
-
- enable() {
- this.enabled = true;
- }
-
- test() {
- alert('You clicked me');
- }
-}
-```
-
-
-
-
-##### File k-button.css
-
-```
-.demo-section {
- text-align: center;
-}
-.box .k-textbox {
- margin: 0;
- width: 80px;
-}
-```
-
-
-* * *
-
-#### More details: [Components catalog](#/samples/button)
-#### Next page: [Chart component tutorial](#/help/docs/app_developers_tutorials/5._chart_component)
-
diff --git a/sample/src/help/docs/app-developers-tutorials/chart.md b/sample/src/help/docs/app-developers-tutorials/chart.md
index 566ff831..44bf6d97 100644
--- a/sample/src/help/docs/app-developers-tutorials/chart.md
+++ b/sample/src/help/docs/app-developers-tutorials/chart.md
@@ -2,103 +2,3 @@
### 5. Chart
-Unlike the previous two controls, Chart is represented (by Aurelia KendoUI bridge) as an Aurelia custom element (component) - since chart is not a native HTML element. The specific sample we chose to discuss here is sufficiently complex, allowing us to glance over the its use in an Aurelia application as well as the relationship between this component, Aurelia KendoUI bridge and the KendoUI native plugin.
-
-
-##### View: k-chart.html
-
-```html
-
-
-
-
Basic KendoUI Chart sample
-
- See KendoUI Bridge chart folder for more details
-
-
-
-
-
-
-
-```
-
-
-Here is this view rendered by the [application associated with this tutorial](https://github.com/aurelia-ui-toolkits/skeleton-navigation-kendo).
-
-
-
-
-
-Image 1
-
-
-
-The HTML code in the view is a good demonstration of Aurelia's support for KendoUI's declarative programming - all attributes of the chart are declared there and bound to view model shown next. Note that we chose to define the chart `title` in the view and the **values** of all other attributes in the view model.
-
-
-
-##### View model: k-chart.js
-
-```javascript
-export class BasicUse {
-
- seriesDefaults = {
- type: 'line',
- line: {
- line: {
- style: 'smooth'
- }
- }
- };
-
- series = [{
- name: 'India',
- data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
- }, {
- name: 'World',
- data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
- }, {
- name: 'Haiti',
- data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
- }];
-
- valueAxis = {
- labels: {
- format: '{0}%'
- },
- line: {
- visible: false
- },
- axisCrossingValue: -10
- };
-
- categoryAxis = {
- categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
- majorGridLines: {
- visible: false
- },
- labels: {
- rotation: 'auto'
- }
- };
-
- tooltip = {
- visible: true,
- format: '{0}%',
- template: '${series.name} ${value}'
- }
-}
-```
-
-* * *
-
-#### More details: [Components catalog](#/samples/chart)
-#### Next page: [Grid component tutorial](#/help/docs/app_developers_tutorials/6._grid_component)
-
diff --git a/sample/src/help/docs/app-developers-tutorials/grid.md b/sample/src/help/docs/app-developers-tutorials/grid.md
index d3d1ac58..3069a76a 100644
--- a/sample/src/help/docs/app-developers-tutorials/grid.md
+++ b/sample/src/help/docs/app-developers-tutorials/grid.md
@@ -2,115 +2,3 @@
### 6. Grid
-
-##### View: k-grid.html
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-Here is this view rendered by the **[application associated with this tutorial](https://github.com/aurelia-ui-toolkits/skeleton-navigation-kendo)**.
-
-
-
-
-
-
-Image 1
-
-
-
-
-**Note**: This sample grid requires some additional css in order to render the images of the contact people framed in circles.
-
-
-
-
-**Note**: This view model defines the grid data to be fetched from Telerik's server where they are stored in odata format:
-
-
- `//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers`
-
-
-and that the grid should show 10 rows per page.
-
-
-
-##### View model: k-grid.js
-
-```javascript
-export class BasicUse {
-
- pageable = {
- refresh: true,
- pageSizes: true,
- buttonCount: 10
- };
-
- constructor() {
- this.datasource = {
- type: 'odata',
- transport: {
- read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
- },
- pageSize: 5
- };
- }
-}
-
-```
-
-
-##### View model: basic-grid.css
-
-```
-.customer-photo {
- display: inline-block;
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background-size: 32px 35px;
- background-position: center center;
- vertical-align: middle;
- line-height: 32px;
- box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
- margin-left: 5px;
-}
-
-.customer-name {
- display: inline-block;
- vertical-align: middle;
- line-height: 32px;
- padding-left: 3px;
-}
-```
-
-
-
-
-* * *
-
-#### More details: [Components catalog](#/samples/grid)
-#### Next page: [Next actions](#/help/docs/app_developers_tutorials/7._next_actions)
-
diff --git a/sample/src/help/docs/app-developers-tutorials/introduction.md b/sample/src/help/docs/app-developers-tutorials/introduction.md
index 1ca62698..fe4aeeb4 100644
--- a/sample/src/help/docs/app-developers-tutorials/introduction.md
+++ b/sample/src/help/docs/app-developers-tutorials/introduction.md
@@ -2,42 +2,3 @@
### 1. Introduction
-
-The collection of articles contained in the **App developers tutorials** help category, _which begins with this article you are reading now_, presents several short tutorials on using the **[KendoUI components](http://aurelia-ui-toolkits.github.io/demo-kendo/#/help/docs/about_this_application/2._components_catalog)** from **[Aurelia-KendoUI bridge](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin)** Aurelia plugin.
-
-
-You need to have KendoUI bits on your machine in order to be able to follow the App developers tutorials
-section. Specifically that means how you will develop the app which "hosts" the few selected controls (`autocomplete`, `button`, `chart` and `grid`). This same application that you will build from the scratch, also exists in its finished form **[here](https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo)**, provided as a courtesy to allow you to "peek" into some details that might have escaped you.
-
-
-#### Important note
-The whole section named **Bridge developers tutorials** is intended solely to new bridge projects contributors - a lot narrower class than people interested **App developers tutorials** dedicated to all Aurelia application developers that want to use KendoUI components provided by the Aurelia-KendoUI bridge.
-
-
-* * *
-
-Starting with one of the most simple components - Autocomplete, we will show how can this component be added to the well known **[Aurelia Skeleton Navigation](https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-es2016)** app and then add several additional components (Button, Chart and Grid). By the end of the tutorial we will have completed the **[Skeleton Navigation KendoUI](https://github.com/aurelia-ui-toolkits/skeleton-navigation-kendo)** shown below:
-
-
-
-
-
-
-
-
-
-KendoUI SDK supports the [declarative programming model](http://docs.telerik.com/kendo-ui/intro/installation/markup) - feature that makes if a perfect partner for Aurelia's rich [adaptive binding](http://eisenbergeffect.bluespire.com/aurelias-adaptive-binding/).
-
-
-
-**Note**: Declarative programming is a programming paradigm consisting of description **what the program needs to accomplish** (in terms of the problem domain) instead of describing **how to accomplish that** as a sequence of programming language primitive and API (**[wikipedia](https://en.wikipedia.org/wiki/Declarative_programming)**).
-
-
-
-#### Important note
-
-All subsequent tutorials assume that you used the **HAVING KENDOUI ALREADY: VENDORS** approach described on the **[Help on Installation](#/help/docs/about_this_application/5._installation)** page.
-
-* * *
-
-#### Next page: [Setup](#/help/docs/app_developers_tutorials/2._setup)
diff --git a/sample/src/help/docs/app-developers-tutorials/setup.md b/sample/src/help/docs/app-developers-tutorials/setup.md
index ac1d3e68..ef534390 100644
--- a/sample/src/help/docs/app-developers-tutorials/setup.md
+++ b/sample/src/help/docs/app-developers-tutorials/setup.md
@@ -2,174 +2,3 @@
### 2. Setup
-
-Most people like explanations that are done in the context of doing what is just being explained - so let's do something very simple as the first step in showing how to use KendoUI bridge to add several interesting pages rendering KendoUI controls to the well known application: **Aurelia Skeleton Navigation**, a starter kit for building a standard navigation-style app with Aurelia.
-
-
-Get it from **[here](https://github.com/aurelia/skeleton-navigation)** and use the Download ZIP method so we do not have to deal with Git issues in this simple context. After downloading this application, extract its content into the folder conveniently named `skeleton-navigation-kendo` and use the instructions to build and run this app. Specifically, assuming that you already have the NodeJS, jspm and gulp installed, this application should be running after you execute
-
-
-```
-npm install
-jspm install
-gulp watch
-```
-
-and subsequently browse to http://localhost:9000, resulting with the following:
-
-
-
-
-
-
- Image 1
-
-
-Now, we want to add several (four) additional pages to this application that would show KendoUI **autocomplete**, **button** and **grid** components ( the last one shown below rendered in Material black theme:)
-
-
-
-
-
- Image 2
-
-
-* * *
-
-At this point, while following the series of steps described next, it is assumed that you have the KendoUI package already installed on your computer as described in the HAVING KENDOUI ALREADY: VENDORS type of installation (Image 3 below):
-
-
-
-
-
-
- Image 3
-
-
-
-
-and that you executed all 8 steps (partially) shown on image 3 above. While all of them are equally important, at this point verify that your `main.js` class looks like this:
-
-
-```javascript
-import 'bootstrap';
-
-export function configure(aurelia) {
- aurelia.use
- .standardConfiguration()
- .developmentLogging()
- .plugin('aurelia-kendoui-plugin', (kendo) => kendo.pro());
-
- aurelia.start().then(a => a.setRoot());
-}
-
-```
-
-
-
-
-as this will ensure that the application we are about to augment from its original form, loads the Aurelia KendoUI bridge (named plugin in the above code).
-
-
-
-The next screenshot depicts the final UI for the application we are about to create, with four additional menubar items
-
- - KendoUI autocomplete
- - KendoUI button
- - KendoUI chart
- - KendoUI grid
-
-
-
-
-
-
- Image 4
-
-
-In order to clearly separate the added code from the original Aurelia Navigation Skeleton, the original project structure is changed to this:
-
-
-
-
-
-
- Image 5
-
-
-
-
-As the last actions in this **Setup** section of the tutorial, you need to make the following changes, that are indicated in the **Modified code** section of Image 5 above
-
-
-##### File `app.html`
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-##### File `app.js`
-
-
-
-```javascript
-export class App {
- configureRouter(config, router) {
- config.title = 'Aurelia';
- config.map([
- { route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' },
- { route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Github Users' },
- { route: 'k-autocomplete', name: 'k-button', moduleId: 'kendoui/autocomplete/k-autocomplete', nav: true, title: 'KendoUI autocomplete' },
- { route: 'k-button', name: 'k-button', moduleId: 'kendoui/button/k-button', nav: true, title: 'KendoUI button' },
- { route: 'k-chart', name: 'k-chart', moduleId: 'kendoui/chart/k-chart', nav: true, title: 'KendoUI chart' },
- { route: 'k-grid', name: 'k-grid', moduleId: 'kendoui/grid/k-grid', nav: true, title: 'KendoUI grid' },
- { route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' }
- ]);
-
- this.router = router;
- }
-}
-
-```
-
-
-
-
-##### File `main.js`
-
-
-
-```
-import 'bootstrap';
-
-export function configure(aurelia) {
- aurelia.use
- .standardConfiguration()
- .developmentLogging()
- .plugin('aurelia-kendoui-plugin', (kendo) => kendo.pro());
-
- aurelia.start().then(a => a.setRoot());
-}
-```
-
-
-
-* * *
-
-#### Next page: [Autocomplete component](#/help/docs/app_developers_tutorials/3._autocomplete_component)
-
diff --git a/sample/src/help/docs/bridge-developers-notes/babel-dts-generator.md b/sample/src/help/docs/bridge-developers-notes/babel-dts-generator.md
index 706d9e04..cdaa0733 100644
--- a/sample/src/help/docs/bridge-developers-notes/babel-dts-generator.md
+++ b/sample/src/help/docs/bridge-developers-notes/babel-dts-generator.md
@@ -2,147 +2,3 @@
### 3. babel-dts-generator
-
-Aurelia uses a babel plugin called [`babel-dts-generator`](https://github.com/YoloDev/babel-dts-generator) to extract typescript definitions from ES6 source. The babel transpiler doesn't care that there are typescript definitions in the ES6 source, it simply ignores and doesn't output them. The `babel-dts-generator` plugin extracts these definitions, and outputs them to a typescript definition file. As typescript definitions also need `import` statements, it extracts these from the source as well.
-
-So what does this look like?
-
-
-Consider this source, the `index.js` file (note the `js` extension, not the `ts` extension):
-
-
-```
-import {Aurelia} from 'aurelia-framework';
-import * as LogManager from 'aurelia-logging';
-let logger = LogManager.getLogger('aurelia-kendoui-plugin');
-import {KendoConfigBuilder} from './config-builder';
-import 'jquery';
-
-export function configure(aurelia: Aurelia, configCallback?: (builder: KendoConfigBuilder) => void) {
- let builder = new KendoConfigBuilder();
-
- if (configCallback !== undefined && typeof(configCallback) === 'function') {
- configCallback(builder);
- }
-
- // Provide core if nothing was specified
- if (builder.resources.length === 0) {
- logger.warn('Nothing specified for kendo configuration - using defaults for Kendo Core');
- builder.core();
- }
-
- // Pull the data off the builder
- let resources = builder.resources;
-
- if (builder.useGlobalResources) {
- aurelia.globalResources(resources);
- }
-}
-```
-
-
-In the `configure` function, we declare that the `aurelia` paramater is of type `Aurelia`. This is not ES6 syntax. It is a typescript type declaration, in a javascript file.
-
-
-Now, when you run Babel on this file - with the `babel-dts-generator` enabled - it generates something close to this:
-
-
-```
-// index.d.ts
-import { Aurelia } from 'aurelia-framework';
-
-export function configure(aurelia: Aurelia, configCallback?: ((builder: KendoConfigBuilder) => void)): any;
-```
-
-
-The `babel-dts-generator` also adds `any` as the return type of this function, as it is required in order to be valid typescript. Since we didn't declare a return value of this function, the `babel-dts-generator` defaults to outputting `any`. This is also the case for parameters without specified types. For example:
-
-
-`export function configure(aurelia, configCallback) {`
-
-
-_Note the missing typescript declarations of the params_.
-
-
-This will result in:
-
-
-```
-export function configure(aurelia: any, configCallback: any): any;
-```
-
-
-#### Concatenation
-
-The one thing the `babel-dts-generator` is having trouble with is extracting typescript definitions from a set of files. So, the solution is to concatenate all these files into a single output file, and then extract the typescript definitions from it.
-
-
-The concatenation process happens in the [build-index function](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/blob/f24e34411b60376d7bf12367f1b2ab247d821d38/build/tasks/build.js#L17-L31). A sub-step of this process is to fix import statements. This means two things: Removing local imports (relative paths), and removing duplicate import statements.
-
-Consider the following:
-
-```
-// a.js
-import {B} from './folder/b';
-export class A {}
-
-// folder/b.js
-import {Aurelia} from 'aurelia-framework';
-export class B {}
-
-// folder/c.js
-import {Aurelia} from 'aurelia-framework';
-export class C {}
-```
-
-
-If you would not normalize import statements, then the output would look like this:
-
-
-```
-// output.js
-import {B} from './folder/b';
-export class A {}
-
-import {Aurelia} from 'aurelia-framework';
-export class B {}
-
-import {Aurelia} from 'aurelia-framework';
-export class C {}
-```
-
-
-Now, there are three issues with this code that the `build-index` gulp task fixes.
-1. Duplicate `Aurelia` import statements (solution: remove all but one)
-2. The folder `folder` does not exist, the classes B and C are in the sample file as A (solution: the import can be removed)
-3. The import statements are all over the place (solution: hoist import statements)
-
-
-The `build-index` gulp task leverages a few functions from the `aurelia-tools` repository ([this file](https://github.com/aurelia/tools/blob/f4801e460af98013e0d66aaec188891e8d0d0516/src/build.js#L9-L95)). These functions, called by the `build-index` task, results in this output:
-
-
-```
-// output.js
-import {Aurelia} from 'aurelia-framework';
-
-export class A {}
-export class B {}
-export class C {}
-```
-
-
-#### Calling of `babel-dts-generator`
-
-Like mentioned above, the `babel-dts-generator` is a babel plugin. So whenever a file is processed by Babel, the `babel-dts-generator` plugin is called. For example, this happens [here](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/blob/f24e34411b60376d7bf12367f1b2ab247d821d38/build/tasks/build.js#L36). The `babel-dts-generator` is configured in the [build.js file](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/blob/f24e34411b60376d7bf12367f1b2ab247d821d38/build/babel-options.js#L23-L34). By default, the `babel-dts-generator` outputs the `d.ts` file next to the Javascript file from which it extracted the definitions.
-
-
-#### Typescript definitions without distributing a concatenated output file
-
-What if you want to generate typescript definitions using the `babel-dts-generator`, but don't want to distribute a concatenated file?
-
-
-Well you can use a gulp task to concatenate all the files you want to distribute into a temp folder and then extract typescript definitions from it. The generated typescript definition can be copied to any output directory (amd, common etc), so it is downloaded (and kept in `jspm_packages`) when someone `jspm install`'s the plugin.
-
-
-
-_Note: Even though the temp folder is created, and it contains a concatenated file, it is never used._
diff --git a/sample/src/help/docs/bridge-developers-notes/bindables.md b/sample/src/help/docs/bridge-developers-notes/bindables.md
index 90ad7f04..c7a1e696 100644
--- a/sample/src/help/docs/bridge-developers-notes/bindables.md
+++ b/sample/src/help/docs/bridge-developers-notes/bindables.md
@@ -2,182 +2,3 @@
### 1. Auto generation of bindable properties
-
-Before discovering the optimization described in this note, Aurelia-KendoUI control wrappers had this "classic" form shown below (using KendoUI button control as the model). The pattern consists of enumerating all control attributes that we want to expose to the view, decorate them with the @bindable decorator and made them available to the view via `return Object.assign({}, this.options, options);` statement
-
-
-
-```
-import {customAttribute, bindable, inject} from 'aurelia-framework';
-import {pruneOptions, fireKendoEvent} from '../common/index';
-import 'jquery';
-import 'kendo-ui/js/kendo.button.min';
-
-@customAttribute('au-kendo-button')
-@inject(Element)
-export class AuKendoButton {
-
- @bindable enable = true;
- @bindable icon;
- @bindable imageUrl;
- @bindable spriteCssClass;
-
- @bindable options;
-
- constructor(element) {
- this.element = element;
- this.options = {};
- }
-
- bind() {
- this._initialize();
- }
-
- recreate() {
- this._initialize();
- }
-
- _initialize() {
- this.widget = $(this.element).kendoButton(this.getOptions()).data('kendoButton');
- }
-
- getOptions() {
- let options = pruneOptions({
- icon: this.icon,
- enable: this.enable,
- imageUrl: this.imageUrl,
- spriteCssClass: this.spriteCssClass,
- click: (e) => fireKendoEvent(this.element, 'click', e)
- });
-
- return Object.assign({}, this.options, options);
- }
-}
-```
-
-
-After we had made a couple of these wrappers, some patterns started to emerge. We noticed that almost all bindable properties had to be passed to the Kendo's (native) control. We also wanted to see if these bindable properties could be generated somehow, because looking them up in Telerik's docs, and setting the correct default value was a hassle and took a lot of time, and resulted in a couple of avoidable errors.
-
-
-We looked at how the **[Angular-Kendo implementation](http://docs.telerik.com/kendo-ui/AngularJS/introduction)** did this, and found that each Kendo control has an `options` object, containing all supported properties and their default values. For example, when you run `kendo.ui.Button.prototype.options` in your Chrome's console, this is the result:
-
-
-
-
-Every Kendo control (class) has this options object defined within. We can iterate over the properties of this object, and create a bindable property for each one. But before we dive into that part, let's take a look at other ways to get to this object. In our wrappers, we initialized the kendo control via `$(div).kendoButton()` or `$(div).kendoGrid()`. So, we wanted to get the properties of a Kendo control via `kendoGrid` or `kendoButton`.
-
-
-Luckily this was possible with this syntax: `jQuery.fn[controlName].widget.prototype.options` where controlName is 'kendoGrid' or 'kendoButton' or any other Kendo control. The result is the same, it is an object with properties that we can iterate over.
-
-
-Now, instead of using the `@bindable` property decorator, we needed to generate bindable properties from code. The old syntax was this: `@bindable kEnable = true;`. This is a [class field](https://github.com/jeffmo/es-class-fields-and-static-properties#es-class-fields--static-properties) named `kEnable`, with a default value of `true`, and made bindable by the `@bindable` decorator.
-
-
-Because we wanted to do this dynamically, we had to look at the implementation of the bindable decorator, and possibly create our own. We found the decorator in the `decorators.js` file of the `aurelia-templating` repository. It looks like this:
-
-
-```javascript
-export function bindable(nameOrConfigOrTarget?: string | Object, key?, descriptor?): any {
- let deco = function(target, key2, descriptor2) {
- let actualTarget = key2 ? target.constructor : target; //is it on a property or a class?
- let r = metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, actualTarget);
- let prop;
-
- if (key2) { //is it on a property or a class?
- nameOrConfigOrTarget = nameOrConfigOrTarget || {};
- nameOrConfigOrTarget.name = key2;
- }
-
- prop = new BindableProperty(nameOrConfigOrTarget);
- return prop.registerWith(actualTarget, r, descriptor2);
- };
-
- if (!nameOrConfigOrTarget) { //placed on property initializer with parens
- return deco;
- }
-
- if (key) { //placed on a property initializer without parens
- let target = nameOrConfigOrTarget;
- nameOrConfigOrTarget = null;
- return deco(target, key, descriptor);
- }
-
- return deco; //placed on a class
-}
-```
-
-
-Now, we extracted the most important parts of this decorator implementation, and it turned out to be quite simple to create a bindable property from any decorator:
-
-
-```
-let behaviorResource = metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, target);
-let nameOrConfigOrTarget = { name: 'myBindablePropertyName' };
-prop = new BindableProperty(nameOrConfigOrTarget);
-return prop.registerWith(target, behaviorResource, descriptor2);
-```
-
-
-That's all you need to create a bindable property. Now that we knew this was possible, we started on our own decorator that would generate all bindables for us. We needed to pass along 'kendoGrid' or 'kendoButton' so that the decorator could look up the properties it needs to generate. We called it `generateBindables` and could use it like this:
-
-
-```
-@customAttribute('au-kendo-button')
-@generateBindables('kendoButton')
-@inject(Element)
-export class AuKendoButton {
-
- @bindable options;
-
- constructor(element) {
- this.element = element;
- this.options = {};
- }
-
- bind() {
- this._initialize();
- }
-
- recreate() {
- this._initialize();
- }
-
- _initialize() {
- this.widget = $(this.element).kendoButton(this.getOptions()).data('kendoButton');
- }
-
- getOptions() {
- let options = pruneOptions({
- icon: this.icon,
- enable: this.enable,
- imageUrl: this.imageUrl,
- spriteCssClass: this.spriteCssClass,
- click: (e) => fireKendoEvent(this.element, 'click', e)
- });
-
- return Object.assign({}, this.options, options);
- }
-}
-```
-
-
-Note, the `@bindable` property declarations are gone, and the `@generateBindables()` decorator is used instead. Our full implementation of this decorator can be found [here](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/blob/master/src/common/decorators.js).
-
-
-We came to the conclusion that it was not possible to set the default value of a bindable property from the `generateBindables` decorator, because the instance of the actual wrapper was not available. We decided to set these default values from the constructor of each wrapper. Because that would lead to duplicate code, we extracted this into a base class, the `WidgetBase`. The `WidgetBase`'s implementation of this process looks like this:
-
-
-```
- setDefaultBindableValues() {
- let props = jQuery.fn[this.controlName].widget.prototype.options;
-
- for (let prop of Object.keys(props)) {
- this[getBindablePropertyName(prop)] = props[prop];
- }
- }
-```
-
-We retrieve the `options` from the Kendo control, which we talked about earlier, and iterate over this object (just like we did in the `generateBindable` decorator), and set the default value for each property.
-
-
-* * *
diff --git a/sample/src/help/docs/bridge-developers-notes/bridge-utilities.md b/sample/src/help/docs/bridge-developers-notes/bridge-utilities.md
index 50697ea8..6e87b6fe 100644
--- a/sample/src/help/docs/bridge-developers-notes/bridge-utilities.md
+++ b/sample/src/help/docs/bridge-developers-notes/bridge-utilities.md
@@ -4,610 +4,3 @@
### 2. Bridge utilities
-
-This document describes the use of several utilities added by Aurelia UI Toolkits team to make the task of creating an Aurelia plugin simpler.
-
-
-[[`constants.js`](#constants)]
-In order to make the plugin a bit more maintainable, we use the [`constants.js`](#constants) file throughout the entire plugin. Currently, this file contains the conventions we use for the plugin. More specifically, the `k-on-` events and `k-` property conventions.
-
-
-[[`decorators.js`](#decorators)]
-The [`decorators.js`](#decorators) file contains decorators used within multiple wrappers. Currently, this file contains the `generateBindables` decorator, used to create `@bindable` properties for a particular Kendo control.
-
-
-[[`events.js`](#decorators)]
-In several parts of the `aurelia-kendoui-plugin` codebase, events are dispatched. In order to keep the logic of dispatching events in one place, we have put these functions in the [`events.js`](#decorators) file.
-
-
-[[`options.js`](#options)]
-Kendo can act up when `options` objects are used with properties that are `undefined`. We use the `pruneOptions` function in [`options.js`](#options) to prevent these issues.
-
-
-[[`template-compiler.js`](#template-compiler)]
-The `TemplateCompiler` (found in the [`template-compiler.js`](#template-compiler) file) is responsible for compiling and cleaning up views requested by Kendo. It uses the `enhance` capability of Aurelia and hooks into Kendo with the `angular` callback.
-
-
-[[`util.js`](#utils)]
-The [`util.js`](#utils) file contains useful functions that are used in various parts of the codebase. For example, it contains functions to hyphenate and unhyphenate strings.
-
-
-[[`widget-base.js`](#widget-base)]
-The `WidgetBase` is the base class from which all wrappers inherit. The purpose of the `WidgetBase` is to extract common logic from the wrappers.
-
-
-* * *
-
-
-
-File `constants.js`
-
-```javacript
-export const constants = {
- eventPrefix: 'k-on-',
- bindablePrefix: 'k-'
-};
-```
-
-[Go to top](#top)
-* * *
-
-
-
-File `decorators.js`
-
-```javacript
-import {BindableProperty, HtmlBehaviorResource} from 'aurelia-templating';
-import {metadata} from 'aurelia-metadata';
-import {getBindablePropertyName} from './util';
-
-/**
-* Creates a BindableProperty for every option defined in a Kendo control
-* in the option property of a Kendo control
-* @param controlName The Kendo control of which the options should be converted into bindable properties
-*/
-export function generateBindables(controlName: string) {
- return function(target, key, descriptor) {
- // get all options defined in the Kendo control
- let options = jQuery.fn[controlName].widget.prototype.options;
-
- // get or create the HtmlBehaviorResource
- // on which we're going to create the BindableProperty's
- let behaviorResource = metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, target);
- let optionKeys = Object.keys(options);
- optionKeys.push('dataSource');
-
- for (let option of optionKeys) {
- // set the name of the bindable property to the option
- let nameOrConfigOrTarget = {
- name: getBindablePropertyName(option)
- };
-
- let prop = new BindableProperty(nameOrConfigOrTarget);
- prop.registerWith(target, behaviorResource, descriptor);
- }
- };
-}
-```
-
-[Go to top](#top)
-* * *
-
-
-
-File `events.js`
-
-```javacript
-import {constants} from './constants';
-
-/**
-* Fire DOM event on an element
-* @param element The Element which the DOM event will be fired on
-* @param name The Event's name
-* @param data Addition data to attach to an event
-*/
-export function fireEvent(element: Element, name: string, data? = {}) {
- let event = new CustomEvent(name, {
- detail: data,
- bubbles: true
- });
- element.dispatchEvent(event);
-
- return event;
-}
-
-/**
-* Fire DOM event on an element with the k-on prefix
-* @param element The Element which the DOM event will be fired on
-* @param name The Event's name, without k-on prefix
-* @param data Addition data to attach to an event
-*/
-export function fireKendoEvent(element: Element, name: string, data? = {}) {
- return fireEvent(element, `${constants.eventPrefix}${name}`, data);
-}
-```
-
-[Go to top](#top)
-* * *
-
-
-
-File `options.js`
-
-```javacript
-/**
-* Implicitly setting options to "undefined" for a kendo control can break things.
-* this function prunes the supplied options object and removes values that
-* aren't set to something explicit (i.e. not null)
-* @param options the options object to prune the properties of
-*/
-export function pruneOptions(options: any) {
- let returnOptions = {};
-
- for (let prop in options) {
- if (options.hasOwnProperty(prop) && options[prop] !== null) {
- returnOptions[prop] = options[prop];
- }
- }
-
- return returnOptions;
-}
-```
-
-[Go to top](#top)
-* * *
-
-
-
-File `template-compiler.js`
-
-```javacript
-import {inject} from 'aurelia-framework';
-import {TemplatingEngine} from 'aurelia-templating';
-
-/**
-* An adaptor which uses Aurelia's enhance capability to
-* compile any template Kendo wants to have compiled
-*/
-@inject(TemplatingEngine)
-export class TemplateCompiler {
-
- /**
- * We don't need to initialize the TemplateCompiler every time a Kendo controls
- * is initialized
- */
- isInitialized = false;
-
- constructor(templatingEngine) {
- this.templatingEngine = templatingEngine;
- }
-
- /**
- * Initialize the template compiler and
- * patch the angular property to retrieve compilation requests
- * from Kendo controls
- * @param $parent The overrideContext to use when a template gets compiled
- */
- initialize() {
- if (this.isInitialized) return;
-
- // all controls derive from kendo.ui.Widget
- // override the angular property on these objects, and point it towards handleTemplateEvents
- let _this = this;
- kendo.ui.Widget.prototype.angular = function(_event, _args) {
- _this.handleTemplateEvents(this, _event, _args);
- };
- kendo.mobile.ui.Widget.prototype.angular = function(_event, _args) {
- _this.handleTemplateEvents(this, _event, _args);
- };
-
- this.isInitialized = true;
- }
-
- /**
- * Gets called by Kendo, and filters out compile and cleanup events,
- * then calls the compile or cleanup function with the needed arguments
- * @param _event Events like 'compile' or 'cleanup'
- * @param _args optional array of dataitems
- */
- handleTemplateEvents(widget, _event: string, _args?) {
- if (_event !== 'compile' && _event !== 'cleanup') return;
-
- let $parent = widget._$parent;
-
- if (!$parent) return;
-
- let args = _args();
- let elements = args.elements; // extract elements from the args
- let data = args.data; // extract the dataitems from the args
-
- switch (_event) {
- case 'compile':
- // we need to pass elements and data to compile
- // so that Aurelia can enhance this elements with the correct
- // binding context
- this.compile($parent, elements, data);
- break;
-
- case 'cleanup':
- // we don't care about dataitems when we do the cleanup
- // so we just pass in the DOM elements
- this.cleanup(elements);
- break;
-
- default:
- break;
- }
- }
-
- /**
- * loops through each element, and find the matching dataitem
- * and calls enhanceView(element, dataItem) for each element there is
- * @param elements an array of Elements or a jQuery selector
- * @param data optionally an array of dataitems
- */
- compile($parent, elements, data) {
- for (let i = 0; i < elements.length; i++) {
- let element = elements[i];
- let ctx;
-
- if (data && data[i]) {
- let _data = data[i];
- ctx = _data.dataItem;
- }
-
- if (element instanceof jQuery) {
- element.each((index, elem) => this.enhanceView($parent, elem, ctx));
- } else {
- this.enhanceView($parent, element, ctx);
- }
- }
- }
-
- /**
- * uses the enhance function of Aurelia's TemplatingEngine
- * to "compile" existing DOM elements
- * @param element The Element to compile
- * @param ctx The dataitem (context) to compile the Element with
- */
- enhanceView($parent, element, ctx) {
- let view = this.templatingEngine.enhance(element);
-
- view.bind(ctx, $parent); // call the bind() function on the view with the dataItem we got from Kendo
- view.attached(); // attach it to the DOM
-
- // when we do cleanup, we need to get the view instance
- // so we can call detached/unbind
- // so we store this view instance in the DOM element using JQuery.data
- $(element).data('viewInstance', view);
- }
-
- /**
- * loops through each element kendo asks us to clean up
- * calls cleanupView() for each element
- * @param element An array of elements
- */
- cleanup(elements) {
- if (!elements) return;
-
- for (let i = 0; i < elements.length; i++) {
- let element = elements[i];
- this.cleanupView(element);
- }
- }
-
- /**
- * cleans up the view kendo has asked us to clean up
- */
- cleanupView(element) {
- // extract Aurelia's View instance from the element
- // we stored this in the enhanceView function
- let view = $(element).data('viewInstance');
- if (!view) return;
-
- // unbind and detach the view
- view.detached();
- view.unbind();
- }
-}
-```
-
-[Go to top](#top)
-* * *
-
-
-
-File `utils.js`
-
-```javacript
-const capitalMatcher = /([A-Z])/g;
-import {constants} from './constants';
-
-/**
-* prepends hyphen and lowercases the input char
-* @param char the char to add an hyphen in front for
-*/
-export function addHyphenAndLower(char: string): string {
- return '-' + char.toLowerCase();
-}
-
-/**
-* hyphenates a string
-* kTest -> k-test
-* @param name the string to hyphenate
-*/
-export function _hyphenate(name: string): string {
- return (name.charAt(0).toLowerCase() + name.slice(1)).replace(capitalMatcher, addHyphenAndLower);
-}
-
-/**
-* unhyphenate's a string
-* k-test -> kTest
-*/
-export function _unhyphenate(name: string): string {
- return name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-}
-
-/**
-* prepends prefix and unhyphenates the resulting string
-* test -> kTest
-*/
-export function getBindablePropertyName(propertyName: string): string {
- let name = `${constants.bindablePrefix}${propertyName}`;
-
- return _unhyphenate(name);
-}
-
-/**
-* converts all attributes found on an element to matching Kendo events
-* returns a list of these Kendo events
-*/
-export function getEventsFromAttributes(element: Element): string[] {
- let attributes = Array.prototype.slice.call(element.attributes);
- let events: string[] = [];
-
- for (let attribute of attributes) {
- let attributeName = attribute.name;
- if (!attributeName.startsWith(constants.eventPrefix)) continue;
-
- // kendo-my-event.trigger -> my-event.trigger
- let hyphenatedEvent = attributeName.split(constants.eventPrefix)[1];
-
- // my-event.trigger -> my-event
- let withoutTriggerDelegate = hyphenatedEvent.split('.')[0];
-
- // my-event -> myEvent
- let camelCased = _unhyphenate(withoutTriggerDelegate);
-
- events.push(camelCased);
- }
-
- return events;
-}
-```
-
-[Go to top](#top)
-* * *
-
-
-
-File `widget-base.js`
-
-```javacript
-import {pruneOptions} from './options';
-import {fireKendoEvent} from './events';
-import {getEventsFromAttributes, _hyphenate, getBindablePropertyName} from './util';
-import {TemplateCompiler} from './template-compiler';
-import {TaskQueue} from 'aurelia-framework';
-import {Container} from 'aurelia-dependency-injection';
-
-/**
-* Abstraction of commonly used code across wrappers
-*/
-export class WidgetBase {
-
- /**
- * the Kendo widget after initialization
- */
- widget: any;
-
- /**
- * The element of the custom element, or the element on which a custom attribute
- * is placed. DOM events will be raised on this element
- */
- element: Element;
-
- /**
- * Used to prevent race conditions when events are raised before
- * all bindings have been updated.
- */
- taskQueue: TaskQueue;
-
- /**
- * The element on which a Kendo widget is initialized
- * This is the "element" by default
- */
- target: Element;
-
- /**
- * The Kendo control's name, such as kendoGrid or kendoButton
- */
- controlName: string;
-
- /**
- * The parent context (used for template compilation)
- */
- $parent: any;
-
- /**
- * The templating compiler adaptor
- */
- templateCompiler: TemplateCompiler;
-
- constructor(controlName: string, element: Element) {
- // access root container
- let container = Container.instance;
- this.taskQueue = container.get(TaskQueue);
- this.templateCompiler = container.get(TemplateCompiler);
- this.templateCompiler.initialize();
-
- this.element = element;
-
- this.target = this.element;
-
- this.controlName = controlName;
-
- // the BindableProperty's are created by the generateBindables decorator
- // but the values of the bindables can only be set now the class has been
- // instantiated
- this.setDefaultBindableValues();
- }
-
-
- bind(ctx) {
- this.$parent = ctx;
- }
-
- /**
- * collects all options objects
- * calls all hooks
- * then initialized the Kendo control as "widget"
- */
- _initialize() {
- if (!this.$parent) {
- throw new Error('$parent is not set. Did you call bind(ctx) on the widget base?');
- }
-
- // get the jQuery selector of the target element
- let target = jQuery(this.target);
-
- // get the constructor of the Kendo control
- // equivalent to jQuery("
").kendoChart
- let ctor = target[this.controlName];
-
- // generate all options, including event handlers
- let options = this._getOptions(ctor);
-
- // before initialization callback
- // allows you to modify/add/remove options before the control gets initialized
- this._beforeInitialize(options);
-
- // instantiate the Kendo control, pass in the target and the options
- this.widget = ctor.call(target, options).data(this.controlName);
-
- this.widget._$parent = this.$parent;
-
- this._initialized();
- }
-
- /**
- * hook that allows a wrapper to modify options before
- * the Kendo control is initialized
- * @param options the options object that a wrapper can modify
- */
- _beforeInitialize(options) {
-
- }
-
- /**
- * hook that allows a wrapper to take actions after the widget is initialized
- */
- _initialized() {
-
- }
-
- /**
- * Re-initializes the control
- */
- recreate() {
- this._initialize();
- }
-
- /**
- * combines all options objects and properties into a single options object
- */
- _getOptions(ctor) {
- let options = this.getOptionsFromBindables();
- let eventOptions = this.getEventOptions(ctor);
-
- // merge all option objects together
- // - options property on the wrapper
- // - options compiled from all the bindable properties
- // - event handler options
- return Object.assign({}, this.options, pruneOptions(options), eventOptions);
- }
-
- /**
- * loops through all bindable properties generated by the @generateBindables decorator
- * and puts all these values in a single options object
- */
- getOptionsFromBindables() {
- let props = jQuery.fn[this.controlName].widget.prototype.options;
- let options = {};
-
- for (let prop of Object.keys(props)) {
- options[prop] = this[getBindablePropertyName(prop)];
- }
-
- if (this.kDataSource) {
- options.dataSource = this.kDataSource;
- }
-
- return options;
- }
-
- /**
- * sets the default value of all bindable properties
- * gets the value from the options object in the Kendo control itself
- */
- setDefaultBindableValues() {
- let props = jQuery.fn[this.controlName].widget.prototype.options;
-
- for (let prop of Object.keys(props)) {
- this[getBindablePropertyName(prop)] = props[prop];
- }
- }
-
- /**
- * convert attributes into a list of events a user wants to subscribe to.
- * These events are then subscribed to, which when called
- * calls the fireKendoEvent function to raise a DOM event
- */
- getEventOptions(ctor) {
- let options = {};
- let allowedEvents = ctor.widget.prototype.events;
-
- // iterate all attributes on the custom elements
- // and only return the normalized kendo event's (dataBound etc)
- let events = getEventsFromAttributes(this.element);
-
- events.forEach(event => {
- // throw error if this event is not defined on the Kendo control
- if (!allowedEvents.includes(event)) {
- throw new Error(`${event} is not an event on the ${this.controlName} control`);
- }
-
- // add an event handler 'proxy' to the options object
- options[event] = e => {
- this.taskQueue.queueMicroTask(() => {
- fireKendoEvent(this.target, _hyphenate(event), e);
- });
- };
- });
-
- return options;
- }
-
- /**
- * destroys the widget when the view gets detached
- */
- detached() {
- if (this.widget) {
- this.widget.destroy();
- }
- }
-}
-
-```
-
-[Go to top](#top)
diff --git a/sample/src/help/docs/bridge-developers-notes/bundling.md b/sample/src/help/docs/bridge-developers-notes/bundling.md
index 01949fd4..04680f27 100644
--- a/sample/src/help/docs/bridge-developers-notes/bundling.md
+++ b/sample/src/help/docs/bridge-developers-notes/bundling.md
@@ -2,173 +2,3 @@
### 4. Bundling KendoUI
-
-The Aurelia-KendoUI-plugin is designed to offer you - as end-user - flexibility. The wrappers include only the Kendo files they need for that particular control to work. These files exist (in minified state) in the `js` folder of KendoUI distribution.
-
-
-If you're reading this, then you may be wondering how to bundle these files. There are currently three options for you to consider, so let's explain a few things first.
-
-
-There are two kinds of scripts in the `js` folder : ___individual___ and ___combined___ scripts. An individual script is a file such as `kendo.button.min.js`, containing only one "feature" (button in this case). Combined scripts contain multiple "individual" scripts.
-
-
-Combined scripts are:
-
-
- - kendo.ui.core.min.js (only in the CORE version of KendoUI)
-
- - kendo.all.min.js
-
- - kendo.web.min.js
-
- - kendo.dataviz.min.js
-
- - kendo.mobile.min.js
-
-
-The Aurelia-KendoUI plugin does not use the __combined__ scripts declared above, only the __individual__ files such as `kendo.button.min.js`. Thay way, if you only use the button, you would only have to load `kendo.button.min.js` instead of the 2MB `kendo.all.min.js`.
-
-
-__How bundling works__
-The way bundling works by JSPM, is that it automatically detects any dependencies between your files. A more concrete example is that our plugin imports files in the `js` folder of Kendo. The bundler sees this as a dependency and includes these files in the bundle. However, this is not always what you want. There is a way to tell the bundler not to bundle these dependencies automatically, and that is by putting brackets (`[ ]`) around the import.
-
-
-If your app bundle configuration looks like this:
-
-
-```
- "src/app-build": {
- "includes": [
- "*",
- "aurelia-kendoui-plugin",
- "aurelia-kendoui-plugin/**/*",
- "aurelia-kendoui-plugin/**/*.html!text",
- ]
- },
-```
-
-
-then you can change it to this:
-
-
-```
- "src/app-build": {
- "includes": [
- "[*]",
- "[aurelia-kendoui-plugin]",
- "[aurelia-kendoui-plugin/**/*]",
- "aurelia-kendoui-plugin/**/*.html!text",
- ]
- },
-```
-
-
-
-If you bundle now, you will notice that Kendo is not included in your app's bundle, and you can create a seperate bundle just for the Kendo controls.
-
-Now that you know this, you can choose one of the following options.
-
-
-#### No bundling at all
-This is definitely the easiest option. Instead of bundling the files together, you deploy the entire `js` folder. Only the controls you configure in the `main.js` file of your application will be loaded, in multiple requests.
-
-
-To prevent the JSPM bundler from bundling any Kendo files, you can change your includes of your bundle configuration to use brackets, telling JSPM not to bundle dependencies automatically.
-
-
-```
- "src/app-build": {
- "includes": [
- "[*]",
- "[aurelia-kendoui-plugin]",
- "[aurelia-kendoui-plugin/**/*]",
- "aurelia-kendoui-plugin/**/*.html!text",
- ]
- },
-```
-
-
-
-#### Bundling via JSPM
-If you want to bundle Kendo, we recommend you to create a seperate bundle. You will want to bundle the minified files in the `js` folder.
-
-
-##### Bundling Core via JSPM
-
- "dist/kendo-bundle": {
- "includes": [
- "kendo-ui",
- "kendo-ui/**/*.js"
- ],
- "excludes": [
- "kendo-ui/js/angular.min.js",
- "kendo-ui/js/jquery.min.js",
- "kendo-ui/js/kendo.angular.min.js",
- "kendo-ui/js/kendo.angular2.min.js",
- "kendo-ui/js/kendo.ui.core.min.js"
- ]
- }
-
-
-__Note:__ We have excluded some files from the bundle, because it's unlikely that these files will be used. We also exclude the __combined__ file `kendo.ui.core.min.js`, because we are creating our own bundle from all the individual files.
-
-
-##### Bundling PRO via JSPM
-Kendo PRO is quite difficult to get bundled. For example, the bundler chokes when you try to bundle (and minify) all files, without any exclusions, because it chokes on bundling `kendo.spreadsheet.min.js`. It works fine without minification, but without minification you'll end up with a file of ~7MB, which is not acceptable.
-
-
-A working configuration looks like this:
-
-
-```
- "src/kendo-build": {
- "includes": ["kendo-ui/js/*.min.js"],
- "excludes": [
- "kendo-ui/js/angular.min.js",
- "kendo-ui/js/jquery.min.js",
- "kendo-ui/js/kendo.angular.min.js",
- "kendo-ui/js/kendo.angular2.min.js",
- "kendo-ui/js/kendo.spreadsheet.min.js",
- "kendo-ui/js/kendo.all.min.js",
- "kendo-ui/js/kendo.web.min.js",
- "kendo-ui/js/kendo.dataviz.min.js",
- "kendo-ui/js/kendo.dataviz.mobile.min.js",
- "kendo-ui/js/kendo.mobile.min.js"
- ],
- "options": {
- "inject": true,
- "minify": true,
- "rev": true
- }
- }
-```
-
-
-__Note:__ we exclude a couple of files. Some are __combined__ files, some are unnecessary, and we also exclude the spreadsheet because it gets the bundler stuck.
-
-
-### Mapping to kendo.all.min.js
-##### Note, this is not recommended and has not been tested fully
-
-In your config.js, you can map Kendo files to `kendo.all.min.js`. If you do this, then you can just deploy `kendo.all.min.js` to your server, instead of bundling all individual files first.
-
-
-```
- "github:aurelia-ui-toolkits/aurelia-kendoui-plugin@master": {
- "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
- "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.6",
- "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
- "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
- "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.0.2",
- "kendo-ui/js/kendo.button.min.js": "kendo-ui/js/kendo.all.min.js",
- "jquery": "github:components/jquery@2.1.4"
- },
-```
-
-
-__Note:__ The important part here is `"kendo-ui/js/kendo.button.min.js": "kendo-ui/js/kendo.all.min.js",`
-
-You will need to map every file in the Kendo `js` directory to the `kendo.all.min.js` file. We have seen that this is possible, but do not recommend you use this, as it is very verbose. If you know a better way to do this mapping, please contact us and we will update the documentation, so that others can use this information.
-
-
-* * *
diff --git a/sample/src/help/docs/bridge-developers-notes/html-api-of-kendo-grid.md b/sample/src/help/docs/bridge-developers-notes/html-api-of-kendo-grid.md
index 466dd443..123eb43e 100644
--- a/sample/src/help/docs/bridge-developers-notes/html-api-of-kendo-grid.md
+++ b/sample/src/help/docs/bridge-developers-notes/html-api-of-kendo-grid.md
@@ -2,265 +2,3 @@
### 5. KendoUI Grid component HTML API
-
-#### How is the KendoUI Grid component being used?
-
-Before we can explain how it works, we must first look at how it is used.
-
-The Kendo Grid can be used and configured via the following section of HTML code - (process known as declarative programming):
-
-```html
-
-
-
-
${ContactName}
-
-
-
-
-
-
-```
-
-
-This code is the **[Basic use](#/samples/grid/basic-use)** sample, which is a part of the larger set of **[Button component samples](#/samples/button)** shown in the **[Aurelia KendoUI catalog](#/samples)**.
-
-
-
-**What are the characteristics of this sample, that require this whole article to explain them?**
-
- - We see two custom elements: `k-grid` and `au-col`. The `au-col` custom elements are inside of the `k-grid` custom element, making the `au-col` custom elements "children" of the `k-grid` custom element.
-
-
- - Both custom elements have some `@bindable` properties available, such as `k-data-source`, `title` and `command`. A bindable property is a property inside a view-model marked with the `@bindable` decorator. The `title` property is defined as `@bindable title`. Because of the `@bindable` decorator, we can now set these properties from HTML: ``, and respond to changes of these properties when needed.
-
-
-The `au-col` custom element is a bit special, as it has a template defined within. Let's look at this more closely:
-
-```html
-
-
-
${ContactName}
-
-```
-
-
-This `au-col` has three properties: **`title`**, **`field`** and **`template`**, where the **`title`** and **`field`** are easy to spot, but the **`template`** is somewhat hidden. The `template` property is extracted by the `` custom element from its inner content (innerHTML).
-
-
-#### How does the au-col extract the template?
-
-Let's take a look at the code of the [au-col custom element](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/blob/master/src/grid/au-col.js).
-
-
-We use the `@bindable` properties, to configure them via attributes on the custom element. If we use ``, then Aurelia sets the `title` property on the `au-col` view-model to "Contact Name" and the `field` property to "ContactName".
-
-
-Now, how does it extract the template? This magic happens inside of the `@processContent` decorator.
-
-
-Aurelia's docs explain the @processContent decorator as follows:
-
- The @processContent tells the compiler that the element's content requires special processing.
-
-
-In other words, the `@processContent` decorator allows us to process the content of the custom element before anything else has happened to it. The implementation looks like this:
-
-``` javascript
-
- @processContent((compiler, resources, element, instruction) => {
- let html = element.innerHTML;
- if (html !== '') {
- instruction.template = html;
- }
-
- return true;
- })
-```
-
-
-The `@processContent` decorator passes us a few arguments we can use inside of the callback function. The things we care about are `element` and `instruction`. The `element` is the HTML tag of our custom-element, so in this case, ``. It's the same thing as when you `@inject(Element)`. The `instruction` is a [BehaviorInstruction](http://aurelia.io/docs.html#/aurelia/templating/1.0.0-beta.1.0.1/doc/api/class/BehaviorInstruction). All you need to know is that this object is shared by both the `@processContent` and the actual view-model (`AuCol`). So, this means that we can **define properties** on this object from within the `@processContent` function, and access it from inside the view-model.
-
-
-In our implementation of the `@processContent` function, we take the `innerHTML` of the `` element, and put this in the `template` property of the `instruction`. We could have chosen any property name, but we chose the name **`template`**.
-
-
-Now, in order for us to pull this `template` property of the [`instruction`](#instruction) inside the view-model, we need to inject the `TargetInstruction`, as shown below:
-
-
-```javascript
- @inject(TargetInstruction)
- export class AuCol {
- @bindable title;
- @bindable field;
- template;
-
- constructor(targetInstruction) {
- this.template = targetInstruction.elementInstruction.template;
- }
- }
-```
-
-
-The `targetInstruction` has an `elementInstruction` atttribute which contains the `template` we set inside the `@processContent` function. So now we can use just HTML to define all the column properties we need to pass onto Kendo's grid control! Great!
-
-
-Now before we go on, let's take a look at `return true;` at the end of the `@processContent` function. What does this do? It tells Aurelia that we have handled content processing, and that no further processing should be done. This effectively removes the content of the custom element, and this is exactly what we want, because we don't want to see the template on the screen. We just want to store the template as a property of the AuClass, so we can pass this onto Kendo's grid.
-
-
-#### How does the `k-grid` element get to the properties of the `au-col` elements?
-
-Let's take a step back, and look at the usage of the Grid control one more time:
-
-
-```html
-
-
-
-
${ContactName}
-
-
-
-
-
-
-```
-
-
-We said that all the `au-col` custom elements are "children" of the `` custom element. What we want is to reach all view-models behind the `au-col` elements, from within the view-model of the ``. Aurelia's got us covered. We need to do something else first though.
-
-
-Since the `k-grid` custom element now has content, it has now become a view. For Aurelia to recognize this, in addition to the `grid.js` view-model, we need to create a `grid.html` file (see [Creating Components](http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.3/doc/article/creating-components) article for more details). In this file, we define the following:
-
-```html
-
-
-
-```
-
-
-Notice the use of the `` tag. This tells Aurelia to put the content of the `` tag, at that place in the view. More information about the `` tag, can be found [here](http://patrickwalters.net/wielding-the-power-of-aurelia-content-selectors/).
-
-
-Now we got this out of our way, we can get back to our problem. From inside the `Grid` view-model, we want to get the properties on the view-model's of all `` custom elements. Luckily, Aurelia has made a nice decorator for this: `@children`. It is used as follows:
-
-
-```html
- @customElement('k-grid')
- export class Grid {
-
- @children('au-col') columns;
-
- }
-```
-
-
-That's it! The `Grid` class now has a `columns` property, containing all the view-models of all the `au-col` custom elements, as an array. The `'au-col'` bit is a css selector, so it is pretty powerful.
-
-
-#### How are we communicating the column definitions to Kendo's Grid?
-
-Now, if we would use Kendo Grid without Aurelia, the columns would be configured like this:
-
-
-```javascript
- $("#grid").kendoGrid({
- columns: [
- {
- title: "Contact Name",
- field: "ContactName",
- template: '
-
${ContactName}
'
- },
- {
- title: "Contact Name",
- field: "ContactName",
- },
- {
- title: "Contact Title",
- field: "ContactTitle",
- },
- {
- title: "Company Name",
- field: "CompanyName",
- },
- {
- field: "Country",
- }]
- });
-```
-
-
-If you remember, all these properties (title, field, template) are defined inside the view-model's of the `au-col` custom elements. Because we have the lovely `@children` decorator, all these view-models are available in the `columns` property of the `Grid`. So, we can just pass this array in when we initialize the grid!
-
-
-```javascript
-$("#grid").kendoGrid({
- columns: this.columns
-});
-```
-
-
-And there we have it, Kendo's Grid now knows about the columns we want to see, configured purely via HTML.
-
-
-#### High level overview
-
-Let's take a look (at a high level) at the process.
-
-
-The developer uses this piece of HTML code:
-
-
-```html
-
-
-
-
${ContactName}
-
-
-
-
-
-
-```
-
-
-The `AuCol` class uses `@processContent` to "extract" the template which can be found in the content of the `` custom element, and the `AuCol` class also stores the `title` and `field` properties.
-
-
-The `k-grid` custom element, uses `@children` to get an array of all these `AuCol` instances, which contain the `title`, `field` en `template` properties.
-
-
-When Kendo's Grid gets initialized, this array of `AuCol` instances is passed along. In essence, Kendo's Grid is now initialized as follows:
-
-
-```javascript
- $("#grid").kendoGrid({
- columns: [
- {
- title: "Contact Name",
- field: "ContactName",
- template: '
-
${ContactName}
'
- },
- {
- title: "Contact Name",
- field: "ContactName",
- },
- {
- title: "Contact Title",
- field: "ContactTitle",
- },
- {
- title: "Company Name",
- field: "CompanyName",
- },
- {
- field: "Country",
- }]
- });
-```
-
-
-Notice how we use Aurelia's binding syntax inside the template? How we compile this template is can be better explained in a different article.
\ No newline at end of file
diff --git a/sample/src/help/docs/bridge-developers-notes/introduction.md b/sample/src/help/docs/bridge-developers-notes/introduction.md
index bfe747c9..fe4aeeb4 100644
--- a/sample/src/help/docs/bridge-developers-notes/introduction.md
+++ b/sample/src/help/docs/bridge-developers-notes/introduction.md
@@ -2,5 +2,3 @@
### 1. Introduction
-
-This section contains additional information which we hope will be of value to Aurelia plugin developers in general and to Aurelia KendoUI bridge in particular.
\ No newline at end of file
diff --git a/sample/src/help/docs/bridge-developers-notes/template-compilation.md b/sample/src/help/docs/bridge-developers-notes/template-compilation.md
index 35cd91d5..e7bd5a48 100644
--- a/sample/src/help/docs/bridge-developers-notes/template-compilation.md
+++ b/sample/src/help/docs/bridge-developers-notes/template-compilation.md
@@ -2,137 +2,3 @@
### 6. Template compilation
-
-
-#### Introduction
-Many Kendo controls allow developers to use templates. Take the Autocomplete control as an example:
-
-
-
-
-Image 1
-
-
-
-
-The list items of this autocomplete control are customized via the `template` property of the control.
-
-
-```javascript
- $("#customers").kendoAutoComplete({
- template: '' +
- '
#: data.ContactName #
#: data.CompanyName #
'
- });
-```
-
-
-
-More about Kendo's templating system can be found **[here](http://docs.telerik.com/kendo-ui/framework/templates/overview)**.
-
-
-#### Aurelia's templating system
-Aurelia also has a templating system, with a different syntax than Kendo's. We wanted to allow developers to be able to use Aurelia's templating syntax and all the features that come with Aurelia's system. This integration between Kendo controls and the Aurelia framework has become one of the nicest features of this Aurelia KendoUI bridge.
-
-
-So we wanted to be able to do something like this:
-
-```html
- $("#customers").kendoAutoComplete({
- template: '${data.ContactName} '
- });
-```
-
-
-Note that we used the `${data.ContactName}` interpolation expression **and** the `k-button` custom attribute.
-
-
-#### The hook
-As an example of a good design (and existing AngularJS interface) KendoUI implements a hook for Angular to compile views. Once we contacted Telerik they graciously provided more information about this hook.
-
-
-Kendo controls which support template customization invoke "Angular interface" to compile and cleanup views. The function responsible for invoking this interface looks like this:
-
-
-```javascript
- _angularItems: function(cmd) {
- var that = this;
- that.angular(cmd, function(){
- return {
- elements: that.items(),
- data: $.map(that.dataItems(), function(dataItem){
- return { dataItem: dataItem };
- })
- };
- });
- }
-```
-
-
-The Angular function is called with two parameters: the command and an object with additional data such as a collection of HTML elements and a collection of dataItems. We'll explain more about how it is called in the next chapter.
-
-
-We made a class that is responsible for patching this Angular function, and handle any function call made by a Kendo control. This is our **[Template Compiler](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/blob/163e89fd042a1382a44c746d4494e38026379b24/src/common/template-compiler.js)** being discussed in this note.
-
-
-This **[code section](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin/blob/163e89fd042a1382a44c746d4494e38026379b24/src/common/template-compiler.js#L33-L38)**, replicated below for reader's convenience, shows how the Angular function is patched.
-
-
-```javascript
- ...
- kendo.ui.Widget.prototype.angular = function(_event, _args) {
- _this.handleTemplateEvents(this, _event, _args);
- };
- kendo.mobile.ui.Widget.prototype.angular = function(_event, _args) {
- _this.handleTemplateEvents(this, _event, _args);
- };
- ...
-```
-
-
-Note that we are not using a [fat arrow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) because the caller is the Kendo control, and we want to keep that "context", as we need pull data of of it, in a different part of the TemplateCompiler.
-
-
-#### How is the Angular hook called?
-
-As we have shown before, the code calling the Angular hook looks like this:
-
-
-```javascript
- _angularItems: function(cmd) {
- var that = this;
- that.angular(cmd, function(){
- return {
- elements: that.items(),
- data: $.map(that.dataItems(), function(dataItem){
- return { dataItem: dataItem };
- })
- };
- });
- }
-```
-
-
-This means that our `TemplateCompiler` (which patched the `angular` function) is called with 2 parameters: the command (`cmd`) and an object (we'll call this the `arguments`). The command is a string such "init", "compile" or "cleanup".
-
-
-
-
-Our `TemplateCompiler` only cares about the "compile" and "cleanup" calls. As you can see in the image above, the compile and cleanup functions are called with arguments containing `elements` and `data`.
-
-
-For example, when Kendo wants to have the `
` elements compiled of a Kendo Grid, the `angular` function is called with these arguments:
-
-
-
-
-As you can see, the `elements` is an array of HTML elements Kendo wants to have compiled. The `data` are the dataItems that should be used when compiling. For example, the first item of the `data` array belongs to the first item of the `elements` array.
-
-
-As another sign of a good design, this is all that Aurelia needs to compile a view.
-
-
-
-#### Enhance
-
-___To be written ...___
-
diff --git a/sample/src/help/docs/bridge-developers-tutorials/autocomplete.md b/sample/src/help/docs/bridge-developers-tutorials/autocomplete.md
index f52f5cdf..adff7b1d 100644
--- a/sample/src/help/docs/bridge-developers-tutorials/autocomplete.md
+++ b/sample/src/help/docs/bridge-developers-tutorials/autocomplete.md
@@ -2,148 +2,3 @@
### 3. Autocomplete
-
-This wrapper encapsulates the KendoUI module `kendo.autocomplete.min.js`, ensuring that it behaves as a standard Aurelia component. See how the Aurelia application uses this component **[here](#/help/docs/app_developers_tutorials/3._autocomplete_component)** and **[here](#/samples/autocomplete)**.
-
-
-File `autocomplete.js`
-
-```javascript
-import {customAttribute, bindable, inject} from 'aurelia-framework';
-import {WidgetBase} from '../common/widget-base';
-import {generateBindables} from '../common/decorators';
-import {fireEvent} from '../common/events';
-import 'kendo-ui/js/kendo.autocomplete.min';
-import 'kendo-ui/js/kendo.virtuallist.min';
-
-@customAttribute('k-autocomplete')
-@inject(Element)
-@generateBindables('kendoAutoComplete')
-export class AutoComplete extends WidgetBase {
-
- @bindable kDataSource;
- @bindable options = {};
-
- constructor(element) {
- super('kendoAutoComplete', element);
- }
-
- bind(ctx) {
- super.bind(ctx);
-
- this._initialize();
- }
-
- _initialize() {
- super._initialize();
-
- // without these change and select handlers, when you select an options
- // the value binding is not updated
- this.widget.bind('change', (event) => {
- this.kValue = event.sender.value();
-
- // Update the kendo binding
- fireEvent(this.element, 'input');
- });
-
- this.widget.bind('select', (event) => {
- this.kValue = event.sender.value();
-
- // Update the kendo binding
- fireEvent(this.element, 'input');
- });
- }
-
- kEnableChanged() {
- if (this.widget) {
- this.widget.enable(this.kEnable);
- }
- }
-
- enable(newValue) {
- if (this.widget) {
- return this.widget.enable(newValue);
- }
- }
-
- value(newValue) {
- if (this.widget) {
- if (newValue) {
- this.widget.value(newValue);
- this.widget.trigger('change');
- } else {
- return this.widget.value();
- }
- }
- }
-
- search(value) {
- if (this.widget) {
- this.widget.search(value);
- }
- }
-
- close(value) {
- if (this.widget) {
- return this.widget.close(value);
- }
- }
-
- dataItem(value) {
- if (this.widget) {
- return this.widget.dataItem(value);
- }
- }
-
- destroy() {
- if (this.widget) {
- return this.widget.destroy();
- }
- }
-
- focus() {
- if (this.widget) {
- return this.widget.focus();
- }
- }
-
- readonly(value) {
- if (this.widget) {
- return this.widget.readonly(value);
- }
- }
-
- refresh() {
- if (this.widget) {
- return this.widget.refresh();
- }
- }
-
- select(value) {
- if (this.widget) {
- return this.widget.select(value);
- }
- }
-
- setDataSource(value) {
- if (this.widget) {
- return this.widget.setDataSource(value);
- }
- }
-
- suggest(value) {
- if (this.widget) {
- return this.widget.suggest(value);
- }
- }
-}
-```
-
-
-
-
-* * *
-
-#### Next page: [Button component](#/help/docs/bridge_developers_tutorials/4._button_component)
-
-
diff --git a/sample/src/help/docs/bridge-developers-tutorials/button.md b/sample/src/help/docs/bridge-developers-tutorials/button.md
index 3f0798a1..4b2fe6f3 100644
--- a/sample/src/help/docs/bridge-developers-tutorials/button.md
+++ b/sample/src/help/docs/bridge-developers-tutorials/button.md
@@ -2,50 +2,3 @@
### 4. Button
-
-This wrapper encapsulates the KendoUI module `kendo.button.min.js`, ensuring that it behaves as a standard Aurelia component. See how the Aurelia application uses this component **[here](#/help/docs/app_developers_tutorials/4._button_component)** and **[here](#/samples/button)**.
-
-
-File `button.js`
-
-```javascript
-import {customAttribute, bindable, inject} from 'aurelia-framework';
-import {WidgetBase} from '../common/widget-base';
-import {generateBindables} from '../common/decorators';
-import 'kendo-ui/js/kendo.button.min';
-
-@customAttribute('k-button')
-@generateBindables('kendoButton')
-@inject(Element)
-export class Button extends WidgetBase {
-
- @bindable options = {};
-
- constructor(element) {
- super('kendoButton', element);
- }
-
- bind(ctx) {
- super.bind(ctx);
-
- this._initialize();
- }
-
- kEnableChanged() {
- if (this.widget) {
- this.widget.enable(this.kEnable);
- }
- }
-
- enable(enable) {
- if (this.widget) {
- this.widget.enable(enable);
- }
- }
-}
-```
-
-
-* * *
-#### Next page: [Chart component](#/help/docs/bridge_developers_tutorials/5._chart_component)
-
diff --git a/sample/src/help/docs/bridge-developers-tutorials/chart.md b/sample/src/help/docs/bridge-developers-tutorials/chart.md
index 77f53707..44bf6d97 100644
--- a/sample/src/help/docs/bridge-developers-tutorials/chart.md
+++ b/sample/src/help/docs/bridge-developers-tutorials/chart.md
@@ -2,98 +2,3 @@
### 5. Chart
-
-This wrapper encapsulates the KendoUI module `kendo.chart.min.js`, ensuring that it behaves as a standard Aurelia component. See how the Aurelia application uses this component **[here](#/help/docs/app_developers_tutorials/5._chart_component)** and **[here](#/samples/chart)**.
-
-
-File `chart.js`
-
-```javascript
-import {customElement, bindable, inject} from 'aurelia-framework';
-import {WidgetBase} from '../common/widget-base';
-import {generateBindables} from '../common/decorators';
-import 'kendo-ui/js/kendo.dataviz.chart.min';
-
-@customElement('k-chart')
-@generateBindables('kendoChart')
-@inject(Element)
-export class Chart extends WidgetBase {
-
- @bindable kDataSource;
- @bindable options = {};
-
- constructor(element) {
- super('kendoChart', element);
- }
-
- attached() {
- this._initialize();
- }
-
- getAxis(name) {
- if (this.widget) {
- return this.widget.getAxis(name);
- }
- }
-
- redraw() {
- if (this.widget) {
- return this.widget.redraw();
- }
- }
-
- refresh() {
- if (this.widget) {
- return this.widget.refresh();
- }
- }
-
- resize() {
- if (this.widget) {
- return this.widget.resize();
- }
- }
-
- setDataSource(dataSource) {
- if (this.widget) {
- return this.widget.setDataSource(dataSource);
- }
- }
-
- setOptions(value) {
- if (this.widget) {
- return this.widget.setOptions(value);
- }
- }
-
- imageDataURL() {
- if (this.widget) {
- return this.widget.imageDataURL();
- }
- }
-
- toggleHighlight(show, options) {
- if (this.widget) {
- return this.widget.toggleHighlight(show, options);
- }
- }
-
- destroy() {
- if (this.widget) {
- return this.widget.destroy();
- }
- }
-}
-```
-
-
-File `chart.html`
-
-```html
-
-
-```
-
-
-* * *
-#### Next page: [Grid component](#/help/docs/bridge_developers_tutorials/6._grid_component)
diff --git a/sample/src/help/docs/bridge-developers-tutorials/grid.md b/sample/src/help/docs/bridge-developers-tutorials/grid.md
index a9a28228..3069a76a 100644
--- a/sample/src/help/docs/bridge-developers-tutorials/grid.md
+++ b/sample/src/help/docs/bridge-developers-tutorials/grid.md
@@ -2,316 +2,3 @@
### 6. Grid
-
-This wrapper encapsulates the KendoUI module `kendo.grid.min.js`, ensuring that it behaves as a standard Aurelia component. See how the Aurelia application uses this component **[here](#/help/docs/app_developers_tutorials/6._grid_component)** and **[here](#/samples/grid)**.
-
-
-File `grid.js`
-
-```javascript
-import {inject, children, customElement, bindable} from 'aurelia-framework';
-import {WidgetBase} from '../common/widget-base';
-import {generateBindables} from '../common/decorators';
-import 'kendo-ui/js/kendo.data.signalr.min';
-import 'kendo-ui/js/kendo.filtercell.min';
-import 'kendo-ui/js/kendo.grid.min';
-
-@customElement('k-grid')
-@generateBindables('kendoGrid')
-@inject(Element)
-export class Grid extends WidgetBase {
-
- @children('au-col') columns;
-
- @bindable kDataSource;
- @bindable options = {};
-
- constructor(element) {
- super('kendoGrid', element);
- }
-
- // initialization in bind() is giving issues in some scenarios
- // so, attached() is used for this control
- attached() {
- this._initialize();
- }
-
- _initialize() {
- // init grid on the
tag if initialization is from table
- // else, just use the root element
- this.target = isInitFromTable(this.element) ? this.element.children[0] : this.element;
-
- super._initialize();
- }
-
- _beforeInitialize(options) {
- // allow for both column definitions via HTML and via an array of columns
- if (this.columns && this.columns.length > 0) {
- options.columns = this.columns;
- }
- }
-
- enableChanged(newValue) {
- if (this.widget) {
- this.widget.enable(newValue);
- }
- }
-
- addRow() {
- if (this.widget) {
- this.widget.addRow();
- }
- }
-
- autoFitColumn(value) {
- if (this.widget) {
- this.widget.autoFitColumn(value);
- }
- }
-
- cancelChanges() {
- if (this.widget) {
- this.widget.cancelChanges();
- }
- }
-
- cancelRow() {
- if (this.widget) {
- this.widget.cancelRow();
- }
- }
-
- cellIndex(cell) {
- if (this.widget) {
- return this.widget.cellIndex(cell);
- }
- }
-
- clearSelection() {
- if (this.widget) {
- this.widget.clearSelection();
- }
- }
-
- closeCell() {
- if (this.widget) {
- this.widget.closeCell();
- }
- }
-
- collapseGroup(group) {
- if (this.widget) {
- this.widget.collapseGroup(group);
- }
- }
-
- collapseRow(row) {
- if (this.widget) {
- this.widget.collapseRow(row);
- }
- }
-
- current(cell) {
- if (this.widget) {
- return this.widget.current(cell);
- }
- }
-
- dataItem(row) {
- if (this.widget) {
- return this.widget.dataItem(row);
- }
- }
-
- destroy() {
- if (this.widget) {
- this.widget.destroy();
- }
- }
-
- editCell(cell) {
- if (this.widget) {
- this.widget.editCell(cell);
- }
- }
-
- editRow(row) {
- if (this.widget) {
- this.widget.editRow(row);
- }
- }
-
- expandGroup(row) {
- if (this.widget) {
- this.widget.expandGroup(row);
- }
- }
-
- expandRow(row) {
- if (this.widget) {
- this.widget.expandRow(row);
- }
- }
-
- getOptions() {
- if (this.widget) {
- return this.widget.getOptions();
- }
- }
-
- hideColumn(column) {
- if (this.widget) {
- this.widget.hideColumn(column);
- }
- }
-
- lockColumn(column) {
- if (this.widget) {
- this.widget.lockColumn(column);
- }
- }
-
- refresh() {
- if (this.widget) {
- this.widget.refresh();
- }
- }
-
- removeRow(row) {
- if (this.widget) {
- this.widget.removeRow(row);
- }
- }
-
- reorderColumn(destIndex, column) {
- if (this.widget) {
- this.widget.reorderColumn(destIndex, column);
- }
- }
-
- saveAsExcel() {
- if (this.widget) {
- this.widget.saveAsExcel();
- }
- }
-
- saveAsPDF() {
- if (this.widget) {
- this.widget.saveAsPDF();
- }
- }
-
- saveChanges() {
- if (this.widget) {
- this.widget.saveChanges();
- }
- }
-
- saveRow() {
- if (this.widget) {
- this.widget.saveRow();
- }
- }
-
- select(rows) {
- if (this.widget) {
- return this.widget.select(rows);
- }
- }
-
- setDataSource(dataSource) {
- if (this.widget) {
- this.widget.setDataSource(dataSource);
- }
- }
-
- setOptions(options) {
- if (this.widget) {
- this.widget.setOptions(options);
- }
- }
-
- showColumn(column) {
- if (this.widget) {
- this.widget.showColumn(column);
- }
- }
-
- unlockColumn(column) {
- if (this.widget) {
- this.widget.unlockColumn(column);
- }
- }
-}
-
-// if the first child node is a table tag
-// then the user wants to initialize the Kendo Grid from an
-// existing table
-function isInitFromTable(element) {
- return element.children.length > 0 && element.children[0].nodeName === 'TABLE';
-}
-```
-
-
-File `grid.html.js`
-
-```HTML
-
-
-
-```
-
-
-File `au-col`.js
-
-```javascript
-import {inject, noView, processContent, bindable, TargetInstruction} from 'aurelia-framework';
-
-@noView
-@processContent((compiler, resources, element, instruction) => {
- let html = element.innerHTML;
- if (html !== '') {
- instruction.template = html;
- }
-
- return true;
-})
-@inject(TargetInstruction)
-export class AuCol {
- @bindable aggregates;
- @bindable attributes;
- @bindable columns;
- @bindable command;
- @bindable editor;
- @bindable encoded;
- @bindable field;
- @bindable filterable;
- @bindable footerTemplate;
- @bindable format = '';
- @bindable groupable;
- @bindable groupFooterTemplate;
- @bindable groupHeaderTemplate;
- @bindable headerAttributes;
- @bindable headerTemplate;
- @bindable hidden;
- @bindable lockable;
- @bindable locked;
- @bindable menu;
- @bindable minScreenWidth;
- @bindable sortable;
- @bindable title;
- @bindable values;
- @bindable width;
- template;
-
- constructor(targetInstruction) {
- this.template = targetInstruction.elementInstruction.template;
- }
-}
-```
-
-
-* * *
-#### Next page: [Next actions](#/help/docs/bridge_developers_tutorials/7._next_actions)
-
-
diff --git a/sample/src/help/docs/bridge-developers-tutorials/introduction.md b/sample/src/help/docs/bridge-developers-tutorials/introduction.md
index 3ecd3b99..fe4aeeb4 100644
--- a/sample/src/help/docs/bridge-developers-tutorials/introduction.md
+++ b/sample/src/help/docs/bridge-developers-tutorials/introduction.md
@@ -2,26 +2,3 @@
### 1. Introduction
-
-In this set of tutorials we are focusing on the Aurelia plugin components of this application (explained with more details in the **[About this application - Introduction page](#/help/docs/about_this_application/1._introduction)**). Starting with the standard **[Aurelia Skeleton plugin](https://github.com/aurelia/skeleton-plugin)** project, we will follow the same "story" that starts in the **[Application developers tutorials](#/help/docs/app_developers_tutorials/1._introduction)** from a ***different prospective*** - a viewpoint of the Aurelia plugin developer.
-
-
-In other words, this article presents the **overview** of the ways to create and extend the **[Aurelia-KendoUI-Plugin](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-plugin)** project developed by the team of Aurelia UI Toolkits organization, dedicated to contribute to Aurelia's wide spread adoption. Just like the App developers tutorials start with the Aurelia Skeleton Navigation and add several Aurelia-KendoUI components assuming that these components are already available, this set of tutorials show how this initial set of components was created, starting with the **["empty plugin"](https://github.com/aurelia/skeleton-plugin)**
-
-
-The note **[Bridge utilities](#/help/docs/bridge_developers_notes/2._bridge_utilities)** is not a "direct" part of this set of tutorials - it describes the several utilities developed by the Aurelia UI Toolkits team to make the process of building Aurelia plugins easier. The same explanation holds for the other notes in the **Bridge developers notes**
-
-
-* * *
-
-
-#### Important notes
-
-All subsequent tutorials assume that you used the **HAVING KENDOUI ALREADY: VENDORS** approach described on the **[Help on Installation](#/help/docs/about_this_application/5._installation)** page.
-
-
-The whole section named **Bridge developers tutorials** is intended solely to new bridge projects contributors - a lot narrower class than people interested **App developers tutorials** dedicated to all Aurelia application developers that want to use KendoUI components provided by the Aurelia-KendoUI bridge.
-
-* * *
-
-#### Next page: [Setup](#/help/docs/bridge_developers_tutorials/2._setup)
diff --git a/sample/src/help/docs/bridge-developers-tutorials/setup.md b/sample/src/help/docs/bridge-developers-tutorials/setup.md
index 89f9af29..ef534390 100644
--- a/sample/src/help/docs/bridge-developers-tutorials/setup.md
+++ b/sample/src/help/docs/bridge-developers-tutorials/setup.md
@@ -2,174 +2,3 @@
### 2. Setup
-Similarly to the **[Setup page](#/help/docs/app_developers_tutorials/2._setup)** of the Application developers tutorial section, let's do something very simple as the first step in showing how to use the **[Aurelia skeleton plugin](https://github.com/aurelia/skeleton-plugin)** to create the initial few "wrappers" for KendoUI controls. Get it from **[here](https://github.com/aurelia/skeleton-plugin)** and use the Download ZIP method so we do not have to deal with Git issues in this simple context. After downloading this application, extract its content into the folder conveniently named `skeleton-plugin-kendo` and use **[these instructions](https://github.com/aurelia/skeleton-plugin/blob/master/README.md)** to build this code.
-
-
-#### 2.1 Plan of actions (stated as "steps" below)
-In order to simplify this set of tutorials we will take a slight tack away from the "embedded application" approach described in **[introduction section](#/help/docs/about_this_application/1._introduction)** of the About this application help page. In order to verify the correctness of our wrappers code, we will use the **[application](https://github.com/aurelia-ui-toolkits/skeleton-navigation-kendo)** developed in the **[App developers tutorials](#/help/docs/app_developers_tutorials/1._introduction)**, to act in the role of the "consumer" of our newly created wrappers. Here is how to we do this:
-
-
-
-Having the standard Aurelia Skeleton Plugin installed (unzipped) and built, we need to do several changes to get everything ready for development of KendoUI components
-
-
-
-
-
- Image 1
-
-
-#### Step 1
-
-Replace the original content of the `src` folder with the folders and (empty) files shown on Image 2 below:
-
-
-
-
-
- Image 2
-
-
-We will define the content for `autocomplete.js`, `button.js`, `chart.js` and `grid.js` files in subsequent tutorials pages, starting with [Autocomplete component](#/help/docs/bridge_developers_tutorials/3._autocomplete_component) first.
-
-
-#### Step 2
-Replace the complete content of the `package.json` file with the content of **[this](https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo/blob/master/package.json)** `package.json` file. **Make sure** that you replace all references to [https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo](https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo) with the "path" to your own repository to be used in the course of these tutorials.
-
-
-#### Step 3
-Edit the "root level" `config.js` file and ensure that the lines 8, 9 and 15 are as shown in the code section below (in particular is is the line 15 - `'kendo-ui/*': 'vendors/*'` that sets this project to use the settings defined in the "HAVING KENDOUI ALREADY: VENDORS" tab on the [Installation](#/installation) page)
-
-```javascript
-System.config({
- defaultJSExtensions: true,
- transpiler: 'babel',
- babelOptions: {
- 'optional': [
- 'runtime',
- 'optimisation.modules.system',
- 'es7.decorators',
- 'es7.classProperties'
- ]
- },
- paths: {
- 'github:*': 'jspm_packages/github/*',
- 'npm:*': 'jspm_packages/npm/*',
- 'kendo-ui/*': 'vendors/*'
- },
-
- map: {
- 'aurelia-binding': 'npm:aurelia-binding@1.0.0-beta.1.0.3',
- 'aurelia-bootstrapper': 'npm:aurelia-bootstrapper@1.0.0-beta.1',
- ...
-```
-
-
-#### Step 3
-Add the the following code to define the (so far empty) file `index.js` - this is the plugin's interface to the consumer application, used for plugin initialization.
-
-```javascript
-import {Aurelia} from 'aurelia-framework';
-import * as LogManager from 'aurelia-logging';
-let logger = LogManager.getLogger('aurelia-kendoui-plugin');
-import {KendoConfigBuilder} from './config-builder';
-import 'jquery';
-
-export function configure(aurelia: Aurelia, configCallback?: (builder: KendoConfigBuilder) => void) {
- let builder = new KendoConfigBuilder();
-
- if (configCallback !== undefined && typeof(configCallback) === 'function') {
- configCallback(builder);
- }
-
- // Provide core if nothing was specified
- if (builder.resources.length === 0) {
- logger.warn('Nothing specified for kendo configuration - using defaults for Kendo Core');
- builder.core();
- }
-
- // Pull the data off the builder
- let resources = builder.resources;
-
- if (builder.useGlobalResources) {
- aurelia.globalResources(resources);
- }
-}
-```
-
-#### Step 4
-Add the the following code to define the (so far empty) file `config-builder.js` - this is the tool that creates the final content of the `index.js` - interface to the consumer application, used for plugin initialization.
-
-```javascript
-/**
-* Configure the Aurelia-KendoUI-plugin
-*/
-export class KendoConfigBuilder {
-
- resources: string[] = [];
- useGlobalResources: boolean = true;
-
- /**
- * Globally register all Kendo Core wrappers
- */
- core(): KendoConfigBuilder {
- this.kendoButton()
- .kendoTabStrip()
- .kendoProgressBar()
- .kendoSlider()
- .kendoColorPicker()
- .kendoDropDownList();
- return this;
- }
-
- /**
- * Globally register all Kendo Core and Kendo Pro wrappers
- */
- pro(): KendoConfigBuilder {
- this.core()
- .kendoGrid()
- .kendoAutoComplete()
- .kendoChart();
- return this;
- }
-
- /**
- * Don't globalize any resources
- * Allows you to import wrappers yourself via
- */
- withoutGlobalResources(): KendoConfigBuilder {
- this.useGlobalResources = false;
- return this;
- }
-
- kendoAutoComplete(): KendoConfigBuilder {
- this.resources.push('autocomplete/autocomplete');
- return this;
- }
-
- kendoButton(): KendoConfigBuilder {
- this.resources.push('button/button');
- return this;
- }
-
- kendoGrid(): KendoConfigBuilder {
- this.resources.push('grid/grid');
- this.resources.push('grid/au-col');
- return this;
- }
-
- kendoChart(): KendoConfigBuilder {
- this.resources.push('chart/chart');
- return this;
- }
-}
-
-```
-
-#### Step 5
-This is not an action step - it is rather a reminder that the document **[Bridge utilities](#/help/docs/bridge_developers_notes/2._bridge_utilities)** has the explanations and the code for all functionality that Aurelia UI Toolkits team created to simplify the process of building this bridge.
-
-* * *
-
-#### Next page: [Autocomplete component](#/help/docs/bridge_developers_tutorials/3._autocomplete_component)
-
-
-
- 
- 
- 
- 
- 
- 
- 
-
- 
- 
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-