Bart van Uden

Kendo UI is a very popular toolkit at our company and I wanted to see if I could easily integrate Kendo UI to an Aurelia project by using the aurelia-kendoui-bridge. I decided to use the new Aurelia-CLI to set up an Aurelia project using TypeScript and Webpack. After creating the Aurelia project I continued with installing the aurelia-kendoui-bridge. Although the documentation is quite extensive, because of all the possible combinations of transpilers, loaders and project templates, it can be difficult to find the correct method of adding the aurelia-kendoui-bridge to a new project. After some trial and error I thought I had setup everything correctly and was now ready to add the first Kendo component to a page. The Kendo combobox I added resulted in some jQuery issues that needed to be resolved. Eventually I got everything working and I thought it might be useful to share the steps I took to setup an Aurelia project with TypeScript and Webpack and install and use the aurelia-kendoui-bridge.

Step 1: Create a new Aurelia project

If you don’t have the Aurelia-CLI yet, install it by running the following npm command npm install aurelia-cli. If you already have it installed make sure you have the latest version as support for Webpack 3 was not available before august 18th 2017.

Create a new Aurelia project by typing au new at a command or powershell prompt. After you enter a name for your project the CLI will ask you if you would like to use the default setup or customize your choice. Pick option 3 (custom) to select your preferred loader, bundler, transpiler and more. In the next steps a picked Webpack as the loader/bundler and TypeScript as transpiler. I picked the default option for all other questions. When the CLI completes installing all the dependencies it will congratulate you on creating your project and will present you with some guidelines on how to proceed. Make sure you change directory into the project’s folder and test if the application runs before proceeding to the next step.

Step 2: Install Kendo UI

This is quite straightforward.

• install kendo-ui:

  npm install --save @progress/kendo-ui
  

• In main.ts, use

  import '@progress/kendo-ui/js/kendo.all'
  

  to load all Kendo controls.

• Import the css files in main.ts:

  import '@progress/kendo-ui/css/web/kendo.common.min.css'
  import '@progress/kendo-ui/css/web/kendo.bootstrap.min.css'
  

Step 3: Install aurelia-kendoui-bridge

• install aurelia-kendoui-bridge:

  npm install aurelia-kendoui-bridge --save
  

• In main.ts load the plugin using

  .plugin(PLATFORM.moduleName('aurelia-kendoui-bridge'))
  

  Your code should look something like this:

  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-kendoui-bridge'))
    .feature(PLATFORM.moduleName('resources/index'));
  

• In webpack.config.js add an entry for the aurelia-kendoui-bridge:

  entry: {
    app: ['aurelia-bootstrapper'],
    vendor: ['bluebird', 'aurelia-kendoui-bridge']
  }
  

Step 4: Add Kendo controls

Normally we would create a new page with a View and ViewModel but for the sake of simplicity let’s just use the app.ts and app.html files to add a Kendo control, in this case a combobox. Lookup the required imports for the control in the documentation and copy them to the template in app.html:

<template> 
  <require from="aurelia-kendoui-bridge/combobox/combobox"></require> 
  <require from="aurelia-kendoui-bridge/common/template"></require>
</template>

Next add the Kendo component to the view:

<ak-combobox k-data-text-field="text" 
  k-data-value-field="value" 
  k-data-source.bind="data">
</ak-combobox>

The final result should like look this:

<template> 
  <require from="aurelia-kendoui-bridge/combobox/combobox"></require> 
  <require from="aurelia-kendoui-bridge/common/template"></require> 
  <h1>${message}</h1> 
  <ak-combobox k-data-text-field="text" 
    k-data-value-field="value" 
    k-data-source.bind="data"> 
  </ak-combobox> 
</template>

Right now there’s no data to bind to. If you want some dummy data you can add some values to the app.ts:

export class App {
  message = 'Hello World!';
  data = [
      { text: 'Cotton', value: '1' },
      { text: 'Polyester', value: '2' },
      { text: 'Cotton/Polyester', value: '3' },
      { text: 'Rib Knit', value: '4' }
    ];
}

Step 5: Fix ‘$ is not defined’

At this point everything seems to be working as expected. The page will load with a Kendo combobox loaded. But if you look closely you will see that the dropdownbox fails to load any data (or show you ‘no data found’) when expanding. In the browser console you will see an Unhandled rejection ReferenceError: $ is not defined. Apparently we need to expose jQuery to the window object. More info is available in this StackOverflow question.

Steps to fix:

• Install expose-loader:

  npm install expose-loader --save-dev
  

• Add the following rule to the rules collection of the module object in webpack.config.js

  { 
    test: require.resolve('jquery'),
    use: [
        { loader: 'expose-loader', options: 'jQuery' },
        { loader: 'expose-loader', options: '$' }
      ]
  }
  

Now you should have a fully functional Kendo combobox in your Aurelia project using the aurelia-kendoui-bridge.