Initial steps

Skeleton Navigation Typescript KendoUI

This section explains the process of constructing the Skeleton Typescript KendoUI sample, starting from the Skeleton Typescript sample application and adding a couple KendoUI components.

Kendo UI Library installation (see here for details)

As this action (adding a few KendoUI Bridge components) is not as simple as adding a few Aurelia Framework components, let's start adding the Kendo UI Professional NPM package by issuing the command

yarn add  @progress/kendo-ui --save

resulting with

+ @progress/[email protected]
added 116 packages in 11.946s

Kendo UI Bridge installation (see here for details)

yarn add css aurelia-kendoui-bridge --save

resulting with

+ [email protected]
+ [email protected]
added 115 packages and updated 2 packages in 11.289s

(we also added the css loader, required by the bridge.)

Add KendoUI Autocomplete component

Autocomplete component, parts of which are highlighted on the image below:

KendoUI Autocomplete component

We recommend to fetch these three source files from the typescript kendo tutorial, which is a part of the Aurelia Kendo UI Bridge catalog application's on-line documentatation.

Update the index.html file

YARN based installation of Kendo UI Professional library places the style files in node_modules\@progress\kendo-ui\css\web, so we have to set this path in the index.html file:

  <link rel="stylesheet" href="node_modules/@progress/kendo-ui/css/web/kendo.common.core.min.css">
  <link rel="stylesheet" href="node_modules/@progress/kendo-ui/css/web/kendo.default.min.css">

Update main.ts file

Add the line .plugin('aurelia-kendoui-bridge') here

Update app.ts file

Add the following route

{ route: 'autocomplete',  name: 'autocomplete', moduleId: 'autocomplete', nav: true, title: 'Autocomplete' }

Update aurelia.json file

1. Add the dependencies information for Kendo UI library and Kendo UI Bridge

          {
            "name": "kendo",
            "path": "../node_modules/@progress/kendo-ui/",
            "resources": [
              "js/kendo.autocomplete/*.js"
            ]
           },
           {
            "name": "aurelia-kendoui-bridge",
            "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
            "main": "index",
            "resources": [
              "common/*.{js,html}",
              "autocomplete/*.{js,html}"
            ]
           }
   

   after the entry for fetch

2. Change the value of stub component of the text plugin to false;