Creating new application | GitHub | CM tutorial - KendoUI edition

Differences from the original version

This document is not a tutorial on KendoUI bridge base application development - check Aurelia KendoUI Bridge to learn more. Similarly this document does not teach you about RequireJS module loader. Instead it will show you how to manually enhance the original Contact Manager tutorial to use KendoUI bridge and render its view using Aurelia KendoUI components, instead of using Bootstrap.

The source code for for the Contact Manager tutorial - KendoUI edition is here, and this article will describe the details of changes applied to the application configuration files.

1. package.json

Add references to as specific versions of jQuery and aurelia-kendoui-bridge

Image 1

2. aurelia.json

• Set "stub: false in the loader section:

  
  
  Image 2

• Add the code

           {
            "name": "aurelia-kendoui-bridge",
            "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
            "main": "index"
          }
  

  to the dependencies section

Image 3

Note: the rest of the changes required to change the application rendering are of course specific to Aurelia KendoUI components. Check the following files for details:

• contact-list replaced the original bootstrap list with KendoUI panel bar.

• app added KendoUI tab strip

• new component contact-grid.