Aurelia-Syncfusion Bridge

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:

• Properties
• Two-way binding
• Event binding
• 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-grid e-data-source.two-way="gridData" e-allow-paging="true" e-on-record-click.delegate="recordClick($event.detail)">
</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-grid e-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-grid e-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-grid e-data-source.two-way="gridData" e-allow-paging=true
        e-on-record-click.delegate="recordClick($event.detail)">
   <ej-column e-field="EmployeeImage" e-header-text="Employee Image" <ej-template="">
         <div><img src="images/grid/Employees/${EmployeeID}.png"> </div>
      
   </ej-column>
   <ej-column e-field="EmployeeID" e-header-text="Employee ID"></ej-column>
   <ej-column e-field="FirstName" e-header-text="First Name"></ej-column>
   <ej-column e-field="LastName" e-header-text="Last Name"></ej-column>

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:

• Create “grid” folder inside “src/samples/” location.
• Create “grid.html” files inside “src/samples/grid” folder and use the following code example to render the grid component:

<template>
  <div>
    <ej-grid e-data-source.two-way="gridData" e-allow-paging="true" e-allow-sorting="true" e-on-record-click.delegate="recordClick($event.detail)">
      <ej-column e-field="OrderID" e-header-text="Order ID" e-text-align="right"></ej-column>
      <ej-column e-field="CustomerID" e-header-text="Customer ID">
     </ej-column>
     <ej-column e-field="EmployeeID" e-header-text="Employee ID" e-text-align="right"></ej-column>
     <ej-column e-field="Freight" e-header-text="Freight" e-format="{0:C}" e-text-align="right"></ej-column>
     <ej-column e-field="OrderDate" e-header-text="Order Date" e-format="{0:MM/dd/yyyy}" e-text-align="right"></ej-column>
   </ej-grid>
  </div>
</template>

• Create “grid.js” file with the following code snippet inside “src/samples/grid” folder:

export class 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
  }
}

• Now, we are going to configure the navigation for the created grid sample in “src/app.js” file.

export class 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;
 
 }
}

• To run the application, execute the following command:

gulp watch

• Browse 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.