Aurelia-Syncfusion Bridge | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (199)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (892)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (497)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (379)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (319)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

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.

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed