Today we’re pleased to announce that the Syncfusion JavaScript library officially supports the Aurelia client framework. Our team has been working with the Aurelia team for the past couple of months to make this happen. We would especially like to thank Nikolaj Ivancic and Daniel Bendel from the Aurelia-UI-Toolkits team for all their help.
The Aurelia-Syncfusion bridge includes wrappers for all the Syncfusion JavaScript widgets. The wrappers act as an interface between the Aurelia framework and Syncfusion JavaScript widgets. This bridge is a structured, configurable collection of JavaScript classes that wraps the Syncfusion JavaScript controls and presents them as Aurelia components.
The Syncfusion Aurelia components offer the following features:
o Properties
o Two-way binding
o Event binding
o Templates
Properties
All the properties of Syncfusion JavaScript widgets are
defined as attributes for an equivalent Aurelia component. You can easily set
value to widget properties by prefixing the property name with “e-” in
the component markup.
Code snippet
The “allowPaging” property of the ejGrid widget can be
defined as shown in the following:
<ej-gride-data-source.bind="gridData" e-allow-paging="true"></ej-grid> |
Note: “gridData”
will be loaded from the Aurelia view-model.
Two-way binding
Two-way binding observes a property in the model and updates
the UI automatically. The Syncfusion-Aurelia components support two-way binding
for all interactive properties. For example, the “value” property in input
component, dataSource and selectedRowIndex in grids, etc.
Code snippet
The “dataSource” property of the ejGrid widget can be
defined as a two-way bindable property as shown in the following:
<ej-gride-data-source.two-way="gridData" e-allow-paging="true"> </ej-grid> |
Event binding
Events can be bound to components by specifying the event
name attribute with the prefix “e-on-”.
Code snippet
The “recordClick” event of the ejGrid widget can be bound as
shown in the following:
<ej-gride-data-source.two-way="gridData" e-allow-paging="true" e-on-record-click.delegate="recordClick($event.detail)"> </ej-grid> |
Templates
Aurelia framework’s templating engine and syntaxes can be
used within all Syncfusion-Aurelia components that support templating.
Code snippet
The ejGrid widget’s column template can be rendered as shown
in the following:
<ej-gride-data-source.two-way="gridData" e-allow-paging=true e-on-record-click.delegate="recordClick($event.detail)"> <ej-columne-field="EmployeeImage"e-header-text="Employee Image" <ej-template> <div><imgsrc="images/grid/Employees/${EmployeeID}.png"/></div> </ej-template> </ej-column> <ej-columne-field="EmployeeID"e-header-text="Employee ID"></ej-column> <ej-columne-field="FirstName"e-header-text="First Name"></ej-column> <ej-columne-field="LastName"e-header-text="Last Name"></ej-column> </ej-grid> |
Getting started
For getting started quickly, we have already configured a template
project in GitHub aurelia-ui-toolkits/syncfusion-template-repository.
Run the following set of commands to clone the repository and install all the
required packages:
> git clone “https://github.com/aurelia-ui-toolkits/syncfusion-template-repository” > cd syncfusion-template-repository > npm install > jspm install |
The following steps describe how to create a Syncfusion
Aurelia grid component:
o Create “grid” folder inside “src/samples/”
location.
o Create “grid.html” files inside “src/samples/grid”
folder and use the following code example to render the grid component:
<template> <div> <ej-gride-data-source.two-way="gridData" e-allow-paging=true e-allow-sorting=true e-on-record-click.delegate="recordClick($event.detail)"> <ej-columne-field="OrderID"e-header-text="Order ID" e-text-align="right"></ej-column> <ej-columne-field="CustomerID"e-header-text="Customer ID"> </ej-column> <ej-columne-field="EmployeeID"e-header-text="Employee ID" e-text-align="right"></ej-column> <ej-columne-field="Freight"e-header-text="Freight"e-format="{0:C}" e-text-align="right"></ej-column> <ej-columne-field="OrderDate"e-header-text="Order Date" e-format="{0:MM/dd/yyyy}"e-text-align="right"></ej-column> </ej-grid> </div> </template> |
o Create “grid.js” file with the following code
snippet inside “src/samples/grid” folder:
exportclass Grid { constructor() { this.gridData = [{ OrderID: 10248,
CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38 }, { OrderID: 10249,
CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61 }, { OrderID: 10250,
CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83 }, { OrderID: 10251,
CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34 }, { OrderID: 10252,
CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), Freight: 51.3 }]; }
recordClick(e) { //handle event here } } |
o Now, we are going to configure the navigation
for the created grid sample in “src/app.js” file.
exportclass App { configureRouter(config,
router) { config.title = 'Aurelia Syncfusion'; config.map([ { route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' }, { route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' }, { route: 'button', name: 'button', moduleId: 'samples/button/button', nav: true, title: 'Button' }, { route: 'grid', name: 'grid', moduleId: 'samples/grid/grid', nav: true, title: 'Grid' } ]); this.router = router; } } |
o To run the application, execute the following
command:
gulp watch |
o Browse to http://localhost:9000 to see the application. You can make
changes in the code found under “src” folder and the browser should
auto-refresh itself while you save the files. The grid component is rendered as
shown in the screenshot.
Sample catalog application
A complete catalog application demonstrating the usage of
all the components in the Syncfusion-Aurelia bridge is available here.