CLI based Navigation Skeletons | Specific transformations
Navigation Typescript KendoUI
Note: this document is a more formal definition of the process described in Initial steps | Navigation Typescript KendoUI chapter.
Step 1 - add the highlighted parts of the KendoUI Autocomplete component
Before anything else, make sure to run the command
yarn install
to build this application to the level equivalent of its predecessor.
Fetch these three source files from the GitHub repo, described in the tyescript-kendo tutorial, which is a part of the Aurelia Kendo UI Bridge catalog application's on-line documentatation.
KendoUI Autocomplete component
Step 2 - add the Kendo UI Professional NPM package
yarn add@progress/kendo-ui --save
Step 3 - Kendo UI Bridge installation (see here for details)
yarn install css aurelia-kendoui-bridge --save
Step 4 - update index.html
Add the following two link tags after this line
<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">
Step 5 - update main.ts file
Add the line .plugin('aurelia-kendoui-bridge')
here.
Step 6 - update aurelia.json file
6.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
6.2. Change the value of stub
component of the text plugin
to false
;