KendoUI-skeleton-esnext

Managing tutorial samples

Sample 1 - KendoUI-skeleton-esnext

| Original source code| Matching KendoUI sample |

Step 1 - add KendoUI bridge

Assuming that the original source code was successfuly built and executed by

npm install && jspm install && gulp watch

the KendoUI bridge is added by running

jspm install aurelia-kendoui-bridge

Step 2 - add source code using KendoUI bridge

This sample uses JSPM module loader and adds two "widgets" Autocomplete and Button from KendoUI Core package to the standard Skeleton-esnext application, by adding the kendoui folder to the original application's src folder.

This added folder's content is:

1. autocomplete

   • autocomplete.html

   • autocomplete.js

2. button

   • button.html

   • button.js

   • button.css

Step 3 - add KendoUI widgets

Define the kendo-sdk folder as the standard location for KendoUI widgets, so we need to create this folder and add the needed KendoUI code.

Step 4 - modifying various existing files

Step 4.1 - index.html

Add these three scripts

<!-- Kendo-SDK files -->
<script src="kendo-sdk/js/jquery.min.js"></script>
<script src="kendo-sdk/js/jszip.min.js"></script>
<script src="kendo-sdk/js/kendo.all.min.js"></script>

Note: the line <script src="kendo-sdk/js/kendo.all.min.js"></script> is a temporary placeholder - it will be replaced with kendo.custom.min.js created to include only KendoUI widgets actually used in the application.

Step 4.2 - package.json

Add the reference to aurelia-kendoui-bridge

Step 4.3 - Changes to prevent JSPM from loading JQuery

• Run jspm install bootstrap -o "{ dependencies: {} }"

• Add this line to config.js