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;



results matching ""

    No results matching ""