Aurelia
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-Kendo UI Bridge
The Aurelia-Kendo UI Bridge creates native Aurelia components for the Kendo UI suite so that developers can 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 Kendo UI Components Catalog index is the resulting output of its implementation and development.
This Catalog 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-Kendo UI 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-Kendo UI Bridge.
Basic Usage
The following example demonstrates code snippets for Grid components. For more runnable examples of all Aurelia-Kendo UI controls that the Bridge supports, refer to the Aurelia-Kendo UI components catalog.
<template>
<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">
<ak-template>
<div class='customer-photo' style="background-image: url(https://demos.telerik.com/kendo-ui/content/web/Customers/${CustomerID}.jpg);"></div>
<div class='customer-name'>${ContactName}</div>
</ak-template>
</ak-col>
<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>
</ak-grid>
</template>
export class BasicUse {
pageable = {
refresh: true,
pageSizes: true,
buttonCount: 10
};
constructor() {
this.datasource = {
type: 'odata',
transport: {
read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
},
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;
}