Monterey User Manual
  • Introduction
  • What is Monterey
  • Quick guide through the User manual
  • Monterey and module loaders
  • Monterey future plans
  • Installing Monterey
  • Help system
    • Live tour
    • Tooltip based help
  • Features
    • App launcher
    • Aurelia-CLI
    • Dotnet
    • GistRun
    • Error logger
    • Gulp
    • JSPM manager
    • NPM manager
    • Preferences
    • Project info
    • Run
    • Support
    • Task manager
    • Terminal
    • Typings
    • Webpack
    • Workflow manager
  • Creating new applications
    • Aurelia-CLI
      • Default-ESNext
      • Default-TypeScript
      • Custom
    • skeleton-esnext-aspnetcore
    • skeleton-esnext-webpack
    • skeleton-esnext
    • skeleton-typescript-aspnetcore
    • skeleton-typescript-webpack
    • skeleton-typescript
    • GitHub
      • Contact manager tutorial
      • CM tutorial - KendoUI edition
        • Differences from the original version
      • CM tutorial - Materialize edition
        • Differences from the original version
  • Managing existing applications
  • Reaching support
Powered by GitBook
On this page
  • Differences from the original version
  • 1. package.json
  • 2. aurelia.json
  1. Creating new applications
  2. GitHub
  3. CM tutorial - KendoUI edition

Differences from the original version

PreviousCM tutorial - KendoUI editionNextCM tutorial - Materialize edition

Last updated 7 years ago

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 to learn more. Similarly this document does not teach you about . Instead it will show you how to manually enhance the 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 , and this article will describe the details of changes applied to the application configuration files.

1.

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

Image 1

2.

  • 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

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:

Image 3

replaced the original bootstrap list with KendoUI panel bar.

added KendoUI tab strip

new component .

contact-list
app
contact-grid
Aurelia KendoUI Bridge
RequireJS module loader
original Contact Manager tutorial
here
package.json
aurelia.json
dependencies section