CLI based Navigation Skeletons | Specific transformations
Navigation esnext KendoUI
Note: this document is a more formal definition of the process described in Initial steps | Navigation esnext 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 esnext-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 add 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.js file
Add the line .plugin('aurelia-kendoui-bridge')
after this line.
Step 6 - update aurelia.json file
6.1. Add the dependencies information for Kendo UI library and Kendo UI Bridge after this line
{
"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}"
]
}
]
}
6.2. Change the value of stub
component of the text plugin
to false
;