New to Kendo UI for jQuery? Download free 30-day trial


Aurelia is an open-source, vanilla-JavaScript client framework for mobile, desktop, and web. It is written in ECMAScript 2016 and helps you create a maintainable, testable, and extensible UI.

Aurelia-KendoUI Bridge

The Aurelia-KendoUI Bridge creates native Aurelia components for the Kendo UI suite, so that developers are able to build Aurelia applications by using the Kendo UI toolkit. This interface is a structured and configurable collection of JavaScript classes. It wraps native Kendo UI controls and presents them as Aurelia components.

The skeleton of the Bridge is the standard Aurelia plugin setup and the KendoUI Components Catalog index is the resulting output of its implementation and development.

This Catalogue is an Aurelia application that serves two main purposes:

  • Allows developers to verify the correct function of the wrapper code, which presents the Kendo UI native control as an Aurelia component.
  • Continuously shares the status of the project by demonstrating different ways of using each component to render Kendo UI controls.

For more information on the Aurelia-KendoUI Bridge functionalities, refer to this blog post by Aurelia's founder, Rob Eisenberg.

Prerequisites and Installation

To get your project up and running, refer to the page on installing the Aurelia-KendoUI Bridge.

Basic Usage

The following example demonstrates code snippets for Grid components. For more runnable examples on all Aurelia-KendoUI controls the Bridge supports, refer to the page of the Aurelia-KendoUI components catalog.

        <require from="./basic-use.css"></require>

        <ak-grid k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true">
          <ak-col k-title="Contact Name" k-field="ContactName">
              <div class='customer-photo' style="background-image: url(${CustomerID}.jpg);"></div>
              <div class='customer-name'>${ContactName}</div>
          <ak-col k-title="Contact Name" k-field="ContactName"></ak-col>
          <ak-col k-title="Contact Title" k-field="ContactTitle"></ak-col>
          <ak-col k-title="Company Name" k-field="CompanyName"></ak-col>
          <ak-col k-field="Country"></ak-col>
    export class BasicUse {

    pageable = {
      refresh: true,
      pageSizes: true,
      buttonCount: 10

    constructor() {
      this.datasource = {
        type: 'odata',
        transport: {
          read: '//'
          pageSize: 5
    #grid-basic-use .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;

    #grid-basic-use .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;

See Also

In this article